在伪元素上进行转换时过渡会导致元素在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

问题在于，将鼠标悬停在伪元素上时会创建一个空白空间。添加一些边框可以更好地看到这一点：

;; equally good on Broadwell/Skylake, and AMD.  But worse on Intel SnB through HSW
NOT RDX
NEG RAX
SBB RDX,-1     ; can't use the imm=0 special case

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);
}