Scrolling not working with animated background on mobile


On web the scrolling works fine. On iOS (not tested on Android) it conflicts with the animated background.

Here is the the read-only link:

Any help would be greatly appreciated. Thanks!


Hi @jprimiani

Thanks for making the post. I tried deleting the scrolling style from the custom code entirely, then added overflow: hidden to the embed titled eye.

From my end, it looks like this fixed the issue:

​Please let me know if this solves the problem! :slight_smile:

Hm, I tried that and didn’t fix the issue. To recreate open on iPhone or Android and doesn’t scroll down due to conflicting animating background.

Hi @jprimiani

One solution is to use a still image of your background on mobile.

Another solution I came up with, albeit a bit hacky, worked decently well.

For mobile, I absolutely positioned a div over the top of the hero section and gave it z-index: 10

You can adjust the dimensions of the div as you see fit, but I used vw and vh and it seemed to work well on my iPhone 6.

Note: this method makes it scrollable and still keeps the animated bg, but you can no longer interact with the animation on mobile.



Hopefully this helps :slight_smile:

That worked perfect! :slight_smile:

Thank you so much Brandon, have a great weekend!

1 Like