WebKit的边界半径和溢出错误使用任何动画/转换时(Webkit border-radius an

我有收到一个奇怪的错误，当我使用的组合overflow ， border-radius和transition 。 我有它内部的IMG一个div。 该div有边框半径和溢出设置为隐藏。 当我将鼠标悬停在IMG我有发生，这使得图像放大到创建变焦效果的过渡。 问题是，溢出似乎在图像的左下角和右下角的突破。

我创建了一个对的jsfiddle你明白我在说什么。 http://jsfiddle.net/dmcgrew/HuMrC/1/

它工作正常，在Firefox，但在Chrome和Safari打破。

任何人都知道什么可能导致这或如何解决呢？

Answer 1:

我不知道如果我理解正确的问题，图像不会加载。 如果您添加height: 100%; 到.inner_block它帮助您的问题？

http://jsfiddle.net/HuMrC/2/

Answer 2:

我有完全相同的问题。 添加此父容器解决了这个问题对我来说（这是一个不太混入）。

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}

Answer 3:

我加了负的z-index值图像和母公司更高的价值

li {z-index:10; overflow: hidden;}

li img {z-index: -10;}

Answer 4:

接受的答案并没有为我工作，因为我不能有明确的边界增加了屏蔽件的可点击区域，我也不希望它掩盖了其他元素（并设置高度为100％没有解决问题）。

见我的回答一个相关的问题的可能解决方案。

Answer 5:

而试图放大到一个div内的照片我已经在过去像这样有一个问题。 我通过添加旋转固定它scale(1.05) rotate(0.02deg)至刻度变换（它实际上除去出问题线）

我今天的问题是如何毛刺线断平移Y DIV悬停效果。 令人惊讶的是，我被消除掉他们的overflow: hidden;

希望这有助于未来的调试器。

文章来源: Webkit border-radius and overflow bug when using any animation/transition