40

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

<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 中会中断。

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

4

9 回答 9

94

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

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}
于 2013-05-21T23:25:44.067 回答
2

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

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

li img {z-index: -10;}
于 2017-06-23T09:53:00.367 回答
2

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

.block {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
于 2019-10-09T04:50:10.180 回答
1

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

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

于 2013-01-17T16:42:53.510 回答
1

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

请参阅我对相关问题的回答以获取可能的解决方案。

于 2013-04-19T16:50:26.860 回答
0

-- 简单的解决方案 --

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

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

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

于 2021-03-02T17:02:46.973 回答
-1

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

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

希望这有助于未来的调试器。

于 2018-08-03T03:29:22.770 回答
-1

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

border: solid 0px transparent;
于 2020-05-20T14:45:56.930 回答
-1

这是关于堆叠上下文的问题。

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

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

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

于 2021-10-27T14:48:01.997 回答