【发布时间】：2020-03-07 07:37:39
【问题描述】：
我遇到了一个奇怪的错误，我怀疑是 Safari CSS 错误。发生的情况是动画元素在 CSS 转换期间消失，并在其结束时重新出现。此错误仅在 Safari 上发生。它在 Chrome 和 Firefox 上运行良好。此外，如果动画元素的初始位置小于页面宽度的一半，它也可以正常工作。
如果您使用的是 Safari，您可以在这里看到问题：http://yodesign.se/transition-anomaly/
调整浏览器窗口的大小，使文本靠近窗口的右边缘。单击移动按钮。文本会短暂消失，然后重新出现在其新位置。按 Unmove 将其移回。
现在使浏览器窗口非常宽，使文本（在其未移动位置）位于窗口的中心，然后再试一次。动画现在按预期工作。
这是完整的代码：
<html>
<body>
<button onclick="move(true)">Move</button>
<button onclick="move(false)">Unmove</button>
<div id="mover" style="position: relative;transition: transform 0.5s;">
<div style="position: absolute; left: 800px;">
<div>Close to right edge</div>
</div>
</div>
</body>
<script>
function move(doMove) {
document.getElementById('mover').style.transform = doMove ? "translate(-300px, 0)" : "translate(0, 0)";
}
</script>
</html>
有可能我在 CSS 中忽略了一些东西导致了这个错误的发生，但由于它在其他浏览器中工作正常（并且在 Safari 中使窗口变宽时），我怀疑这是一个 Safari CSS 错误。初始代码来自 CMS 系统，上面显示的 sn -p 是一个大大简化的版本，仍然显示错误。因此，关于如何重新安排“网页”以使其正常工作的建议对我没有帮助。我已经在 Safari 13.01 以及 webkit nightly build 上复制了这个。
-JM
【问题讨论】：
-
谢谢。已修复（在上面的 sn-p 和可运行代码中）。但这对于手头的问题没有任何影响。