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

Posted 2023-03-06

【中文标题】使用任何动画/过渡时的 Webkit 边界半径和溢出错误

【英文标题】：Webkit border-radius and overflow bug when using any animation/transition

【发布时间】：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 中会中断。

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

【问题讨论】：

谢谢你的问题，正准备发表我自己的问题：）谢谢！

请看这个：***.com/questions/20001515/…这是最终答案和最佳解决方案！

相关 Chromium 错误：#157218.

相关 Safari/Webkit 漏洞：bugs.webkit.org/show_bug.cgi?id=68196

【参考方案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;

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