iOS issue: background-size:cover/parallax not responsive

[GBrachetta]

I have 4 divs stacked each with an img background covering the viewport, and a parallax with GSAP and ScrollTrigger that moves the images at a different speed than the scrolling as I scroll down.

This works fine on all devices except iOS: after deployment, while it still works perfectly on desktop and Android, the images don't scale down on iPhone so I see a clipped portion of my images, zoomed in.

I'm aware there's an issue with background-size:cover and background-attachment:fixed on iOS, but I really would love to find a way to give iOS users the right experience.

I tried using background-attachment:scroll and the images look fine in that case, but then my parallax doesn't work well as it creates a gap between each div as I scroll down.

Is there a way to fix this for iOS?

See the Pen JjKpejW by gbrachetta (@gbrachetta) on CodePen

[ZachSaucier]

Hey GBrachetta and welcome to the GreenSock forums.

 

This is an iOS issue and not a GSAP one. As such we don't really have the capacity to try and figure out a workaround for the issue that you're facing. It's possible that someone might investigate and find a solution though.

 

With that being said you could avoid the issue entirely by using actual <img> elements instead of using background images.

[GBrachetta]

Thank you Zach! I'll try that indeed! I'll need to do some work on the parallax script, I hope to manage, unless you would like to give me some pointers and get me started!  

[GBrachetta]

I managed to fix my issue using parallax.js for the parallax divs and GSAP for the translucent overlays.

I would have loved to just do it with GSAP but I'm not (yet) proficient enough to deal with it