Parallax scroll on mobile broken

Hi all,

I’m trying to create a website with parallax scroll/fixed background images, and it’s working wonderfully on desktop but not on mobile. I have no idea why this is. Can anyone help?

https://rl-brand-site.webflow.io/

https://preview.webflow.com/preview/rl-brand-site?utm_medium=preview_link&utm_source=dashboard&utm_content=rl-brand-site&preview=4578899192b0294bc0986521618ccc4b&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@Macker it seems that it should work fine except that your “Section Hero Scroll” Sections are set to 600px high on mobile landscape and 400px high on mobile portrait. I may just not understand the question, but if you set it to 100vh it should take the full height of the screen.

Hi Luke,

Yes, I’m not particularly concerned with the section heights. The issue is that on mobile the background image moves with the section (it shouldn’t), whereas on desktop it works as expected (the background image is fixed and the section moves to reveal the background).

So @Macker it appears that fixed positioning is simply not supported on some mobile browsers. Namely iOS Safari, Opera Mini, and Samsung’s default browser… Here’s a link to another forum that discussed this problem.

No fixed image bg on mobile?

Hope this helps :grinning_face_with_smiling_eyes: !

Thanks for posting this. I am however confused as I am trying to do something similar that is included in the Luma template. Though the effect only shows up on Desktop and not any of the other 4 sizes on Chrome/Firefox/Safari mobile.

Got any tips by chance?

Here’s a read-only link.