html - 与 chrome 相比，为什么 Safari 对待转换的方式不同？

Question

<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>

检查此链接- https://codepen.io/aby30/pen/mqOMom

这是一个 Pen，它展示了 transform:translate 以及 overflow:hidden 在 Chrome 和 Safari 上如何以不同的方式呈现(在两个浏览器中打开链接并将鼠标悬停在图像上以看到不同)。但是当我采取不同的方法并使用定位(左负到 30px)而不是图像的 transform 进行移动时，我在 Safari 和其他浏览器中得到了想要的结果。 我无法理解这种异常行为。

区别:在 Safari 中，当使用翻译属性时，将鼠标悬停在图像上时，它会向右平移，只有在进行平移时才会出现完整的方形图像。这不是预期的，因为图像的父级 (.imgContainer) 具有隐藏的溢出属性，因此图像的边缘不应在任何时候出现。

Answer 1

这只是一个错误，与所有这种性质的错误一样，修复似乎与将任何 3d css 属性应用于闪烁元素一样简单。

例如:

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