gpt4 book ai didi

css - 这是 Safari CSS 过渡错误吗?

转载 作者:行者123 更新时间:2023-11-28 19:13:45 25 4
gpt4 key购买 nike

我遇到了一个奇怪的错误,我怀疑是 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

最佳答案

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

关于css - 这是 Safari CSS 过渡错误吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58804363/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com