-- 简单的解决方案 --

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

我为图片添加了负z-index值，为父

添加了更高的值

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

li img {z-index: -10;}

Answer 3

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

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

Answer 4

接受的答案对我不起作用，因为我无法使用清晰的边框增加蒙面元素的可点击区域，也不希望它模糊其他元素的区域（并将高度设置为100％没有解决问题。

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

Answer 5

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

我今天要解决的问题是消除translatorY div悬停效果的故障。令人惊讶的是，我通过删除overflow: hidden;

摆脱了它们

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

Answer 6

我在Safari上遇到了这个问题（这是野生动物园中的已知错误）；通过应用-webkit-mask-image进行了修复，对我来说效果很好。欢呼

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

Answer 7

这就是帮助我的地方：

img {
  border: solid 2px transparent;
}

Answer 8

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

border: solid 0px transparent;

Answer 9

-- 简单的解决方案 --

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

.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

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

9 个答案:

-- 简单的解决方案 --