代码之家 › 专栏 › 技术社区 › Daler

Safari iOS上的抖动动画问题:可能的原因和视频演示

gsap parallax css-animations ios css

Daler · 技术社区 · 3 年前

实现了一种基于垂直滚动的图像运动动画。然而,Safari iOS上的图像移动动画是抖动的(请参阅下面的视频)。使用CSS属性transform:translate3d为图像移动设置动画。造成这个问题的可能原因是什么?

使用GSAP的ScrollTrigger。意志的改变不会产生影响。在桌面Chrome上,动画不会抖动。如果使用平滑滚动,则可以解决问题。然而,有必要在iOS上进行原生滚动,因为它的性能更好,但动画仍然会抖动。我们在不同版本的Safari iOS上测试了它,但抖动问题仍然存在。

如果未释放滚动,动画将停止抖动。但是,在执行滑动时,动画会开始抖动。我附上了一段展示这个问题的视频。

0 回复 | 直到 3 年前

推荐文章

lineage · docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]

1 年前

mini1012 · 关键帧css中百分比之间的延迟

1 年前

Fernandossmm · element.animate()使用关键帧似乎忽略了放松功能

2 年前

goalTosin · 当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

2 年前

Dan · 如何设置重置变换的动画:使用CSS关键帧旋转?

2 年前

Dan · 如何使用Tailwind创建动画序列?

2 年前

Thomas Pötz · CSS伪元素的翻译速度快于主元素

2 年前

Morteza M · 在连续旋转中更改CSS动画持续时间

2 年前

Chris Dk · 为什么我的html元素在动画后会消失

2 年前

dododdo · 看到对象后在css中的动画

2 年前