css - Safari 错误与转换和 translateY : "jumping" element

Question

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

在 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 上找不到答案.

您知道一些解决方法吗？

其他 Stack Overflow 相关问题:

• > css transform + width + left + top transition jump on safari browser
• > Transition both transform and size in Safari (9.1)
• > Animating margins and padding with CSS Transition causes jumpy animation

Answer 1

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

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