【问题标题】：Webkit border-radius and overflow bug when using any animation/transition使用任何动画/过渡时的 Webkit 边界半径和溢出错误
【发布时间】：2013-01-01 06:15:31
【问题描述】：

当我使用overflow、border-radius 和transition 的组合时，我遇到了一个奇怪的错误。我有一个 div，里面有一个 img：

<a href="#" class="block size1 annualreport nonprofit">
    <div class="inner_block">
        <img src="http://i.imgur.com/8uuZB.jpg" />
    </div>
</a>

div有一个border-radius，溢出设置为隐藏：

body {background-color:#78735e;}

.block {
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
    margin: 6px;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
    overflow:hidden;
}
.size1 {
    width: 226px;
    height: 464px;
    min-width: 160px;
    max-width: 226px;
}
.inner_block {
    overflow: hidden;
    border-radius: 10px;
}
.block img {
    width: 100%;
    height: 100%;
    transition: all 0.1s;
}

.block img:hover { width:115%; height:115%; }

当我将鼠标悬停在 img 上时，我会发生一个过渡，这会使图像变大以创建缩放效果。问题是overflow 似乎在图像的左下角和右下角断裂。

我创建了一个 JSFiddle 供您查看我在说什么。 http://jsfiddle.net/dmcgrew/HuMrC/1/

它在 Firefox 中运行良好，但在 Chrome 和 Safari 中会中断。

有谁知道这可能是什么原因或如何解决？

【问题讨论】：

谢谢你的问题，正准备发表我自己的问题：）谢谢！
请看这个：stackoverflow.com/questions/20001515/…这是最终答案和最佳解决方案！
相关 Chromium 错误：#157218.
相关 Safari/Webkit 漏洞：bugs.webkit.org/show_bug.cgi?id=68196

标签： css google-chrome safari webkit overflow

【解决方案1】：

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

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

【讨论】：

是的，这似乎可以解决它。我也可以通过向 .block div 添加一个透明颜色的边框来修复它。

【解决方案2】：

接受的答案对我不起作用，因为我不能有清晰的边框来增加被遮罩元素的可点击区域，我也不希望它掩盖其他元素的可点击区域（并且将高度设置为 100% 没有'不解决问题）。

请参阅my answer to a related question 了解可能的解决方案。

【讨论】：

【解决方案3】：

我也有同样的问题。将它添加到父容器为我解决了它（这是一个 LESS 混合）。

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

【讨论】：

感谢您的回答，正要发布我自己的问题 :) 感谢！
如果你在 Safari 中测试我的 jsFiddle jsfiddle.net/d4h2t0Lt，Safari 中仍然会中断
谢谢！这适用于我的 Chrome 和 Mac 版 Safari（v7.1.2）。如果您从 CSS 文件中删除 /* FIX */ 行，然后通过键入“ja”过滤列表，您将看到（在 webkit 上）Jay-z 的头像将在动画期间忽略溢出和边界半径。在这里查看我的 plunker plnkr.co/ayRgf52URQQ5XLqQtZVJ
在新的 Chrome 中，您可以添加 will-change: transform 属性而不是 mixin。它的工作原理是一样的。
太棒了！非常感谢。

【解决方案4】：

我为图像添加了负 z-index 值，为父级添加了更高的值

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

li img {z-index: -10;}

【讨论】：

【解决方案5】：

我过去在尝试放大 div 内的照片时遇到过这样的问题。我通过在比例变换中添加旋转scale(1.05) rotate(0.02deg) 来修复它（它实际上消除了故障线）

我今天的问题是从 translateY div 悬停效果中消除故障线。令人惊讶的是，我通过删除 overflow: hidden; 摆脱了它们

希望这对未来的调试器有所帮助。

【讨论】：

【解决方案6】：

我在 Safari 上遇到过这个问题（这是 Safari 中的一个已知错误）；通过应用-webkit-mask-image 修复它，它对我非常有效。干杯

.block {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

【讨论】：

【解决方案7】：

以上答案对我有用，但稍作调整；

border: solid 0px transparent;

【讨论】：

你不知道我在“上面”看到的是哪个答案，因为我的排序对你来说是不可预测的。请使用明确的参考。此外，我们将不胜感激添加对您的代码调整的解释。

【解决方案8】：

-- 简单的解决方案--

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

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

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

【讨论】：

【解决方案9】：

这是堆叠上下文的问题。

我们可以使用MDN - stacking context中列出的方法来形成一个堆叠上下文：

position: relative; z-index: 1;
-webkit-mask-image: -webkit-radial-gradient(white, black);
opacity: 0.999;
will-change: transform;

就我个人而言，第一种方法是最好的。

【讨论】：