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

【问题标题】：Safari bug with transition and translateY: "jumping" element带有过渡和 translateY 的 Safari 错误：“跳跃”元素
【发布时间】：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 safari webkit css-transitions

【解决方案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 不再存在此问题

【讨论】：