Hello,
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!
No, there’s no way to disable it for specific breakpoints.
Hey,
Well that’s a shame. I love the effect on desktop, but unfortunately it seems to be very laggy and glitchy on mobile. Anything I’m doing wrong potentially?
Hard to say without seeing the problem site. If you share that someone can have a look. Without it we’re just guessing in the dark based on your description.
As for the parallax effect working on mobile — I use it on the Foundry site and it works as expected:
So my guess would be that it is related to your usage of it.
Hey, sorry for the delayed answer.
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.
Let me know if you have any ideas!
Honestly I think it comes down to this –
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!
Cheers
When you get around to it, give a vertical image a try and let me know how it goes.