Mobile Scrolling causes content in <Parallax> container to jump up and down

[adamperlis]

Support

Expected Behavior

On mobile device, content stays relative to the position it was in originally.

Actual Behavior

On mobile device, scroll causes content in container to jump up and down.
https://www.dropbox.com/s/45k7x7yidsjo4vz/ScreenRecording_05-28-2018%2021.MP4?dl=0

[jscottsmith]

Thanks for the video.

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

[adamperlis]

Yup, please see a link to my code below:

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

[jscottsmith]

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.

[adamperlis]

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

[jscottsmith]

updated readme in v1.3.5