转换伪元素转换会导致元素在Safari中抖动

Question

我发现在元素的transform: translate / ::before上动画::after会导致该元素在动画播放时略微抖动。

在此示例中，将鼠标悬停在文本上后，文本将略微移动。不幸的是，我无法在100％的时间内解决问题。但是，我能够通过放大/缩小到某些级别来显示错误。

div {
  position: relative;
  width: 50px;
}

div::after {
  content: "Hovering...";
  position: absolute;
  left: 100%;
  transform: translate(0, 0);
  transition: transform 0.5s;
}

div:hover::after {
  transform: translate(10px, 0);
}

<div>
  One
</div>
<div>
  Two
</div>
<div>
  Three
</div>

Answer 1

问题是当您将鼠标悬停在伪元素上时，您将创建一个空白区域。添加一些边框以更好地看到这个：

div {
  position: relative;
  width: 50px;
  outline:1px solid green;
}

div::after {
  content: "Hovering...";
  position: absolute;
  left: 100%;
  transform: translate(0, 0);
  transition: transform 0.5s;
  outline:1px solid green;
}

div:hover::after {
  transform: translate(10px, 0);
}

<div>
  One
</div>
<div>
  Two
</div>
<div>
  Three
</div>

因此，如果您将鼠标悬停在该空间上，您将获得抖动。

修复的一个想法是在开始时保持一个小的重叠，并用填充来纠正：

div {
  position: relative;
  width: 50px;
  outline:1px solid green;
}

div::after {
  content: "Hovering...";
  position: absolute;
  left: calc(100% - 10px);
  padding-left:10px;
  transform: translate(0, 0);
  transition: transform 0.5s;
  outline:1px solid green;
}

div:hover::after {
  transform: translate(10px, 0);
}

<div>
  One
</div>
<div>
  Two
</div>
<div>
  Three
</div>