background-attachment fixed on mobile devices

[dagda1]

You need to view the codepen result on an actual mobile device.  It looks fine in the chrome dev tools mobile emulator.  I've attached a screenshot.

The codepen use background-attachment: fixed; for the background images, which works fine on desktop devices but not mobile.

Is anyone aware of any fix for mobile or alternative?

See the Pen rNxqBwK by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

This seems to be related to iOS devices as this is working fine on an Android phone:

https://css-tricks.com/the-fixed-background-attachment-hack/

 

Here is another alternative:

See the Pen VaYeoW by callumfindlay (@callumfindlay) on CodePen

 

You can tween the clip path property of the elements using GSAP if you want.

 

Hopefully this helps.

Happy Tweening!