Layers Messing up on Mobile

Design help General
1

PNG
PNG1242×2208 416 KB
PNG
PNG1242×2208 389 KB

My layers are messing up on mobile. Any word?

Here is my site Read-Only: https://preview.webflow.com/preview/alpha-blockcities?utm_source=alpha-blockcities&preview=94abb6b7c22c66c3a13ec7fcab3cddf8

(how to share your site Read-Only link)

2

Hi @prestonattebery, Thanks for your post.

There can be differences between browsers and operating systems and bugs in those operating systems that affect to how a site is rendered.
​
​The styles seem to be rendering fine on Android, so I think this must have to do with rendering the gif and somehow the z-index stacking order getting reset on iOS.
​
​You may have to change the design to not include the layering if this is not rendering correctly on iOS.
​
​I know it can be frustrating when OS version rendering issues happen, in this case it may be easier to come up with another design or try creating an interaction instead of using a GIF.

Here is what I see in Android:

https://cl.ly/7d0710403189/Screen%252520Recording%2525202019-03-24%252520at%25252010.59%252520PM.mov

​