Laggy on Safari iOS while 'strength' props is too high

KotoriK commented 4 years ago

Describe the bug Laggy on Safari iOS while 'strength' props is too high. In my test, it starts happening while the value is higher than 250, and lag becomes significant while the value comes to 500. To Reproduce The first image in The Demo you provided performs laggy on Safari iOS. Its 'strength' prop is set 500. Expected behavior Smooth animation on Safari iOS. Screenshots If applicable, add screenshots to help explain your problem.

Desktop/Smartphone (please complete the following information):

OS and Device: iPhone 8, iOS 13.4.1
Browser: Safari
Version: navigator.appVersion:5.0 (iPhone; CPU iPhone OS 13_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Mobile/15E148 Safari/604.1

Code https://codesandbox.io/embed/r0yEkozrw?view=preview

rrutsche commented 4 years ago

Sounds familiar, I could reproduce it on my phone. Could be a duplicate of #45, right? I already tried some css workarounds in the past to get rid of this jittery scrolling behaviour - obviously with limited success. Maybe I have to try again...

KotoriK commented 4 years ago

Seem like a tough problem. I think it might be caused by mobile browsers' performance-power balance strategy because my Android friend met same problem. Meanwhile, I doubt the way React rerender components might also be a cause of the Laggy. But I found some other libs can handle bouncing properly, for example react-spring. Maybe we can find out how they deal with it.

rrutsche / react-parallax

Laggy on Safari iOS while 'strength' props is too high #78