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

当我使用

溢出

、

边界半径

和

转换

组合时，我遇到了一个奇怪的错误。我有一个div，里面有一个img：

div有一个

边界半径

，溢出设置为隐藏：

body{背景色：#78735e；}
.街区{
位置：绝对位置；
左：0px；
顶部：0px；
边界半径：10px；
利润率：6px；
盒影：0px 0px 6px 2px rgba（0,0,0,0.2）；
溢出：隐藏；
}
.尺码1{
宽度：226px；
高度：464px；
最小宽度：160px；
最大宽度：226px；
}
1.内座{
溢出：隐藏；
边界半径：10px；
}
.闭塞img{
宽度：100%；
身高：100%；
过渡：所有0.1秒；
}
.block img:悬停{宽度：115%；高度：115%；}

当我将鼠标悬停在img上时，会发生一个过渡，使图像变大以创建缩放效果。问题是

溢出

似乎在图像的左下角和右下角破裂

我已经创建了一个JSFiddle，让您看看我在说什么

它在Firefox中运行良好，但在Chrome和Safari中出现故障

---

有人知道这可能是什么原因或如何修复吗？

由于图像未加载，我不知道是否正确理解了问题。如果添加

高度：100%到
。内部块
对您的问题有帮助吗

接受的答案对我不起作用，因为我不能让清晰的边框增加蒙版元素的可点击区域，也不希望它模糊其他元素的可点击区域（并且将高度设置为100%并不能解决问题）

有关可能的解决方案，请参阅。
我也遇到了同样的问题。将其添加到父容器可以解决我的问题（这是一个较少的混合）

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

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

li img {z-index: -10;}

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

我今天的问题是如何消除translateY div悬停效果的小故障。令人惊讶的是，我删除了
overflow:hidden

希望这对未来的调试器有所帮助。
我在Safari上遇到过这个问题（这是Safari中的一个已知错误）；通过应用
-webkit mask image
修复了它，它非常适合我。干杯

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

上面的答案对我很有用，但有点小改动

border: solid 0px transparent;

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

。动画项目{
将更改：transform；/*要添加到现有CSS的新行*/
}

将更改
CSS属性，以提示浏览器元素的预期更改方式。浏览器可能会在实际更改元素之前设置优化。这些类型的优化可以通过在实际需要之前做一些可能非常昂贵的工作来提高页面的响应能力。
~

是的，这似乎解决了问题。我还可以通过在.block div.Thanx中添加一个透明颜色的边框来修复它。对于你的问题，我正要发布我自己的：）Thanx！请看这个：这是最终答案和最佳解决方案！相关Chromium bug：。相关Safari/Webkit bug:Thanx对于您的答案，我将发布我自己的问题：）Thanx！在Safari中仍然中断，如果您在Safari中测试我的JSFIDLE，谢谢！这在Chrome和SafariforMac（v7.1.2）上对我都有效。如果您从CSS文件中删除/*FIX*/行，然后通过键入“ja”来过滤列表，您将看到（在webkit上）Jay-z的化身在动画期间将忽略溢出和边界半径。在新的Chrome中看到我的plunker，您可以添加
will change:transform
属性，而不是mixin。也一样，太棒了！非常感谢。您不知道我看到的是“上面”的哪个答案，因为我的排序对您来说是不可预测的。请使用明确的参考资料。另外，如果能为您的代码调整添加解释，我们将不胜感激。
border: solid 0px transparent;