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

Answer 1

我也遇到了同样的问题。将其添加到父容器中为我解决了这个问题。

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

Answer 2

-- 简单的解决方案 --

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

.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

Answer 3

我在 Safari 上遇到过这个问题（这是 Safari 中的一个已知错误）；通过应用

-webkit-mask-image

修复了它，它对我来说非常有效。干杯

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

Answer 4

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

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

li img {z-index: -10;}

Answer 5

我不知道我是否正确理解了问题，因为图像未加载。如果您将

height: 100%;

添加到

.inner_block

对您的问题有帮助吗？

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

Answer 6

已经有一个关于用于创建新的堆叠上下文的 CSS 属性的答案：

isolation: isolate;

Answer 7

我过去在尝试放大 div 内的照片时遇到过这样的问题。我通过在缩放变换中添加旋转

scale(1.05) rotate(0.02deg)

来修复它 （它实际上消除了故障线）

我今天的问题是消除translateY div 悬停效果中的故障线。令人惊讶的是，我通过删除

overflow: hidden;

摆脱了它们

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

Answer 8

这是一个有关堆叠上下文的问题。

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

• position: relative; z-index: 1;

• -webkit-mask-image: -webkit-radial-gradient(white, black);

• opacity: 0.999;

• will-change: transform;

对于我个人来说，第一种方法是最好的。