带有过渡和translateY 的 Safari 错误：“跳跃”元素

Question

我正在使用translateY 移动一个元素。除Safari（12.1.2 和 13.1.2）和GNOME Web （WebKit）外，在 Chrome、Firefox、IE、旧版 Edge 下一切正常。

在 Safari 下，元素会“跳跃”。这是一个小例子（也可以在CodePen上找到）：

.parent {
  height: 50px;
  background-color: blue;
  padding: 10px;
}

.child {
  background-color: yellow;
  padding: 10px;

  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.child.move {
  transform: translateY(-150%);
  padding: 0; /* If 10px: no bug */
}

<br><br><br>
<div class="parent">
  <div class="child" onclick="this.classList.toggle('move')">Click me</div>
</div>

我在WebKit bug tracker上找不到答案。

你知道一些解决方法吗？

其他堆栈溢出相关问题：

• safari浏览器上的css变换+宽度+左+顶部过渡跳转
• 在 Safari 中转换变换和大小 (9.1)
• 使用 CSS Transition 对边​​距和填充进行动画处理会导致动画跳跃

Answer 1

您可以添加：transition-delay: 1ms;这将在转换之前强制填充属性transform。

https://codepen.io/konstantin/pen/qBWJjjq