我在我的网站上看到一个简单的动画，基本上是一个图像从屏幕的一边移动到另一边，翻转然后返回：
#gans {
padding-top: 9rem;
position: absolute;
-webkit-animation: ease-in-out infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 15s;
}
@-webkit-keyframes run {
0% {
right: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
right: calc(100% - 190px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
right: 0;
-webkit-transform: rotateY(0deg);
}
}它在Edge、Firefox、Chrome甚至iOS版本的Safari上都能完美运行。但在标题中提到的版本上，图像只是消失了（div仍然按预期移动），然后在翻转后重新出现。
该网站可在此link下找到
如有任何建议，我们将不胜感激
来自德国的问候
在另一篇文章中，有人建议使用背面可见性或改变元素的z轴，但都没有成功，但如果我改变旋转+或-1，图像的一半就会出现
1条答案
按热度按时间kq4fsx7k1#
如果您将
position: relative添加到包裹<div id="gans">...</div>的<div class="row">，它似乎可以在MacOS上的Safari 16.3中正常工作我不知道原因，但我猜是MacOS上的Safari（没有iPad可供测试）在动画期间不知何故丢失了元素相对于文档主体的位置。“具有
position: absolute;的元素相对于最近定位的祖先定位[...]如果绝对定位的元素没有定位的祖先，它使用文档体[...]”（src）。* 最近定位的祖先 * 是这里的关键点。这就是为什么显式设置容器位置应该解决这个问题。