转换错误:缩放和溢出:隐藏在 Chrome 中 [英] Bug with transform: scale and overflow: hidden in Chrome

问题描述

使用 CSS3 属性 transform: scale，我发现了一个有趣的问题.我想为图片做一点缩放效果.但是当我为父div使用overflow: hidden和border-radius时，子div扩展了父div的超越.

Working with CSS3 property transform: scale, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div overflow: hidden and border-radius, the child div extended the beyond of parent div.

更新:

问题没有解决.如果我添加 transition，仍然不起作用.我试图解决这个问题，但没有成功.

Problem isn't solved. If I add transition, is still doesn't work. I tried to solve this issue, but without success.

这是一个演示

推荐答案

这是基于 Webkit 的浏览器中的一个已知错误 - 请参阅 #62363.您可以在 .wrap 类中添加 border:1px solid transparent; 以解决该问题.

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

对于更新的要求，向具有 border-radius 的元素添加过渡，这是另一个已知的 Chomre/Webkit 错误 #157218.抱歉，但仍然没有已知的通用解决方法，尽管对该错误的评论说使用 chrome://flags 和使用 --ignore-gpu-blacklist 标志修复它在 Chrome 29 中(今天刚刚进入 Chrome 开发者频道).

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

这篇关于转换错误:缩放和溢出:隐藏在 Chrome 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！