Animations lag / jitter on iOS
sourcelocation opened this issue · comments
Describe the bug
A clear and concise description of what the bug is.
The example ParallaxBanner lags on iOS.
To Reproduce
Steps to reproduce the behavior:
- Go https://react-scroll-parallax-v3.surge.sh/?path=/story/components-parallaxbanner--with-a-single-background on iOS (Xcode Simulator or real phone)
- Scroll
Expected behavior
The animations are expected to be smooth
Screenshots
Video
Desktop (please complete the following information):
- OS: iOS
- Browser: Safari
- Version: on iOS 15, latest
Smartphone (please complete the following information):
- Device: iPhone
- OS: iOS 15
- Browser Safari
- Version latest
Additional context
Providing more information than the previous issue had.
Ya, this is unfortunate issue with most scroll effects on mobile.
I recommend disabling or limiting the effect -- in this case of the storybook banner decrease the movement.
Disable most (or all) scroll effects on mobile. Mobile devices optimize for best battery life and animation performance will often be degraded.
More info here on performance.
If you have recommendations on how to improve performance on mobile please submit a PR. Thanks!