Streaming live at 10am (PST)

Scrolling not working with animated background on mobile


#1

For:
superfuturelabs.webflow.com

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:
https://preview.webflow.com/preview/superfuturelabs?preview=8a9e8a1e70c287fe5a8b5ddaa3b3c8c5

Any help would be greatly appreciated. Thanks!

Best,
Joey


#2

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: https://cl.ly/1Z1W3f0n1u2J

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


#3

Hm, I tried that and didn't fix the issue. To recreate open http://superfuturelabs.webflow.io/ on iPhone or Android and doesn't scroll down due to conflicting animating background.


#4

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.

https://cl.ly/423I2K2y0Z0u

https://cl.ly/1u3r2P3U2L33

Hopefully this helps :slight_smile:


#5

That worked perfect! :slight_smile:

Thank you so much Brandon, have a great weekend!