react-parallax icon indicating copy to clipboard operation
react-parallax copied to clipboard
verified publisher icon rrutsche

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

Open KotoriK opened this issue 5 years ago • 2 comments

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

KotoriK avatar Aug 30 '20 10:08 KotoriK

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...

rrutsche avatar Sep 01 '20 20:09 rrutsche

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.

KotoriK avatar Sep 03 '20 18:09 KotoriK