As the title might give away, I’m looking for an option to disable the parallax effect in the Backdrop stack on mobile devices. The parallax is quite laggy and glitchy when testing on my OnePlus 9 pro, so I’d rather just have it disabled rather than spend time troubleshooting if that’s possible. Thanks!
This is my WIP website: <edited out, work in progress…>. The issue can be seen in the Portfolio section on mobile. I see that the example on the Foundry website works great on my phone, so I wonder what’s different on my end.
The image you’re using for your background is horizontal, so it isn’t super tall. This is fine for desktop. While you do have a lot of content in that section it is more horizontal in its layout. When you go to a vertical mobile device like an iPhone, that section become VERY tall. So you have an image with a smaller vertical footprint trying to ever so slightly adjust itself for parallax over a very long vertical space.
Try a tall vertical image here and see what happens. Or better yet, also limit the amount of content in your parallax section.
Tools like Backdrop are very useful, and the code is pretty good at adjusting itself to different situations, but unfortunately in web design there’s no one-size-fits-all for every situation. You’ll have to make adjustments and experiment often times in web design. Think of it as part of the design itterration process.
Ah, I see. Thanks! That picture is just a placeholder anyway, so it’s good to know that a vertical image should work better when I have the final pictures. Maybe I’ll change it a to a gradient for now!