Question

我遇到了一个奇怪的错误，我怀疑是Safari CSS错误。发生的是正在动画的元素在CSS过渡期间消失，并在其结尾重新出现。仅在Safari上会发生此错误。在Chrome和Firefox上运行正常。此外，如果要设置动画的元素的初始位置小于页面宽度的一半，它也可以正常工作。

如果您使用的是Safari，则可以在这里看到问题：http://yodesign.se/transition-anomaly/

调整浏览器窗口的大小，以使文本靠近窗口的右边缘。单击移动按钮。文本会短暂消失，然后重新出现在新位置。按“取消移动”将其移回。

现在使浏览器窗口非常宽，因此文本（处于“未移动”位置）位于窗口的中心，然后重试。动画现在可以正常工作了。

这是完整的代码：

<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系统，上面显示的摘录是经过简化的版本，仍然显示了错误。因此，我对如何重新安排“网页”以使其正常工作没有任何建议。我已经在Safari 13.01以及webkit每晚构建版上重现了这一点。

-JM

Answer 1

尝试在样式中添加-webkit-transition：-webkit-transform 0.5s

这是Safari CSS转换错误吗？

1 个答案: