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

这是一支笔，显示transform:translate和overflow:hidden在Chrome和Safari上的呈现方式有何不同（在两个浏览器中打开链接并将鼠标悬停在图片上以查看差异）。但是当我采用不同的方法并使用定位（左侧为负30px）而不是图像的transform时，我会在Safari中与其他浏览器一起获得所需的结果。我无法理解这种不寻常的行为。

差异：在使用翻译属性的Safari中，然后在图像悬停时，它会向右翻译，只有在翻译发生时才出现全方形图像。这是不期望的，因为图像的父（.imgContainer）具有隐藏的溢出属性，因此图像的边缘不应该随时出现。

Answer 1

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

例如：

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

Answer 2

这是Safari的常见问题。

要解决此问题，请在border-radius或.image上使用img（同一个）。

然后你应该使用供应商前缀来进行safari -webkit-transform; -webkit-translate等等。

你也可以强迫＆＃39;使用值为0的3d变换进行图形/硬件加速。这样，你就可以了。诀窍＆＃39;浏览器认为有一个复杂的3D动画，所以它分配了更多的资源。

请参阅下面的代码段

＆＃13;

a* {
  color: #333;
}

.parentContainer {
  width: 200px;
  text-align: center;
}

.imgContainer {
  background-color: #fff;
  border-radius: 53%;
  width: 130px;
  height: 130px;
  margin: 0px auto 18px;
  overflow: hidden;
}

.itemContainer {
  display: block;
  transition: all 0.3s ease;
}

.image {
  display: block;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -webkit-transform: translate(-30px, 0px) translateZ(0);
  /*       left: -30px; */
  bottom: -10px;
  border-radius: 53%;
  width: 100%;
  height: 100%;
}

.imgContainer:hover > .image {
  /*       left: 0px; */
  -webkit-transform: translate(0px, 0) translateZ(0);
}

＆＃13;

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

＆＃13;

与chrome相比，为什么Safari会将变换转换视为不同？

2 个答案: