使用任何动画/过渡时Webkit边界半径和溢出错误

Question

我有收到一个奇怪的错误,当我使用的组合overflow,border-radius和transition.我有一个div里面有一个img.div具有边框半径和溢出设置为隐藏.当我将鼠标悬停在img上时,我发生了一个过渡,使图像变大以创建缩放效果.问题是溢出似乎在图像的左下角和右下角中断.

我为你创造了一个jsfiddle,看看我在说什么.http://jsfiddle.net/dmcgrew/HuMrC/1/

它在Firefox中运行良好,但在Chrome和Safari中中断.

任何人都知道可能导致此问题或如何修复它？

Answer 1

我有同样的问题.将它添加到父容器为我解决了(这是一个轻松的混合).

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

Answer 2

-- 简单的解决方案 --

在具有动画过渡的同一元素上，只需添加：

.animated-item {
    will-change: transform; /* New line to add to your existing CSS */
}

CSSwill-change属性向浏览器提示元素将如何变化。浏览器可能会在元素实际更改之前设置优化。这些类型的优化可以通过在实际需要之前完成可能昂贵的工作来提高页面的响应能力。〜https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Answer 3

我不知道我是否正确理解了问题，因为图像未加载。如果您添加height: 100%;它对.inner_block您的问题有帮助吗？

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