Safari浏览器在transition和translateY中存在bug: "跳动"元素

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 相关的问题：

• 在 Safari 浏览器上，CSS 变换 + 宽度 + 左侧 + 顶部过渡跳跃
• 在 Safari（9.1）中同时过渡变换和大小
• 使用 CSS 过渡动画 margin 和 padding 会导致跳动的动画效果

- tanguy_k

---

也许可以像 https://dev59.com/VYnca4cB1Zd3GeqP7jAB#29330961 建议的那样，使用类似 top / bottom 的其他属性来进行过渡并移动目标元素。 - oomer

Answer 1

你可以添加 transition-delay: 1ms;，这会强制在进行 transform 转换之前应用 padding 属性。 https://codepen.io/konstantin/pen/qBWJjjq

- Konstantin

---

这在 transition: transform ... 中工作得很好，但在 transition: all ... 中不起作用 :-/ - tanguy_k

这是一个很棒的解决方案。当视口小于991像素且横向滚动位置不在站点顶部时，在http://budapesturbanwalks.com上的标志动画也遇到了同样的问题。这个解决方案解决了这个问题！它使用了 transition: all，但效果非常好。 - Bence Szalai