Html 为什么Safari与chrome相比有所不同？

检查此链接-

这里有一支笔展示了如何在Chrome和Safari上以不同的方式呈现

transform:translate

以及

overflow:hidden

（在两种浏览器中打开链接并将鼠标悬停在图像上以查看差异）。但是，当我采用不同的方法，使用定位（左负数为30px）来移动图像而不是变换图像时，我在Safari和其他浏览器中获得了所需的结果。 我无法理解这种不寻常的行为

---

区别：在Safari中，当使用translate属性时，在图像悬停时，它会向右平移，只有在平移过程中才会出现完整的方形图像。这不是预期的，因为图像的父级（.imgContainer）具有隐藏的溢出属性，因此图像的边缘在任何时候都不应出现。

这只是一个bug，与所有此类bug一样，修复似乎很简单，只需将任何3d

css

属性应用于闪烁元素

例如：

<div class="parentContainer">
  <a href="#" class="itemContainer">
    <div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
    <div class="title">Title</div>
  </a>
</div>

---

这是Safari的常见问题

要解决此问题，请在

.image

或

img

上使用

边界半径（相同）

然后，您应该为safari
-webkit transform
使用供应商前缀<代码>-webkit翻译

等等

您还可以使用值为0的3d变换“强制”图形/硬件加速。通过这种方式，您可以“欺骗”浏览器，使其认为存在复杂的3d动画，从而分配更多资源

请参阅下面的代码片段

a*{
颜色：#333；
}
.parentContainer{
宽度：200px；
文本对齐：居中；
}
.imgContainer{
背景色：#fff；
边界半径：53%；
宽度：130px；
高度：130像素；
利润率：0px自动18px；
溢出：隐藏；
}
.itemContainer{
显示：块；
过渡：所有0.3秒缓解；
}
.形象{
显示：块；
位置：相对位置；
-webkit过渡：所有0.3秒轻松；
-webkit转换：translate（-30px，0px）translateZ（0）；
/*左：-30px*/
底部：-10px；
边界半径：53%；
宽度：100%；
身高：100%；
}
.imgContainer:hover>.image{
/*左：0px*/
-webkit转换：translate（0px，0）translateZ（0）；
}

您不喜欢的具体区别是什么？你需要具体一点。@SergChernata编辑了我的问题以便更好地理解。谢谢

.imgContainer {
    -webkit-transform: translateZ(0);
    ...