时间戳

首页 > 解决方案 > 这是 Safari CSS 转换错误吗？

css - 这是 Safari CSS 转换错误吗？

问题描述

我遇到了一个奇怪的错误，我怀疑是 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 系统，上面显示的代码片段是一个大大简化的版本，仍然显示错误。因此，关于如何重新安排“网页”以使其正常工作的建议对我没有帮助。我已经在 Safari 13.01 以及 webkit nightly build 上复制了这个。

-JM

标签： csssafari

解决方案

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

推荐阅读