Mobile Scrolling causes content in <Parallax> container to jump up and down about react-scroll-parallax HOT 5 CLOSED

Yup, please see a link to my code below:

https://github.com/dam4222/academy-v3/blob/staging/pages/process.js

from react-scroll-parallax.

Thank you so much for your time and help, much appreciated. I will investigate this issue and try to post my solution here.

from react-scroll-parallax.

Thanks for the video.

Can you put together a demo that reproduces the behavior, or share your code with me?

from react-scroll-parallax.

I believe this is due to the <Parallax> element being placed within a position: fixed container. The lib really wasn't designed with using fixed elements in mind. It's meant to only apply offsets when things are in view as they scroll by. But when it's fixed to the viewport this screws up those calculations as the element is always within view. It's also been brought up before, but I haven't worked on a solution (see #23).

The reason this doesn't happen on desktop is because a resize event is triggered on iPhones when the browser bar goes away which causes the parallax lib to update any cached values.

I would suggest to try using a layout without fixed positioning if possible. From the limited testing I did on my end it seems to fix the jumping, but obviously the site layout breaks a bit.

I'll add some warnings about using fixed element in the README.

from react-scroll-parallax.

updated readme in v1.3.5

from react-scroll-parallax.