Question

我要移动一个带有translationY的元素。在Chrome，Firefox，IE，Edge Safari（v12.1.2）和GNOME Web下，一切正常。

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

您知道一些解决方法吗？

其他与stackoverflow相关的问题：

Answer 1

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

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

Answer 2

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

带有过渡和translationY的Safari错误：“跳转”元素

2 个答案: