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

Posted 2023-03-06

【中文标题】带有过渡和 translateY 的 Safari 错误：“跳跃”元素

【英文标题】：Safari bug with transition and translateY: "jumping" element

【发布时间】：2020-01-17 12:47:58

【问题描述】：

我正在使用 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

【参考方案1】：

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

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

【讨论】：

这适用于transition: transform ...，但不适用于transition: all ... :-/

这是一个很好的解决方案。这里的标志动画有同样的问题budapesturbanwalks.com（当视口低于 991px 并且横向和滚动位置不在站点顶部时）。这解决了它！它使用transition: all，但它就像魅力一样。

【参考方案2】：

2021 年 4 月更新：Safari 14 不再存在此问题