ScrollSmoother Plugin with Parallax Effect on Image Container with Border Radius [Issue on iOS - Works on Android]

[mcallaghan]

Hello there,

I joined recently the ShockinglyGreen Membership to open animations with sky as the limit, thanks GSAP, i love it !

--
I think I spotted an issue on border-radius using ScrollSmoother with the Parallax magic trick (speed: auto).
On iOS I don't get to see the rounded corners on image container (but the parallax effect works fine when scrolling down the page).

Check out the screenShots and Codepen.

If you can help me on this when you get a chance, I appreciate, thanks so much.
 

Always happy to tween with all GSAP Plugins

 

See the Pen RwYOZdz by MatCallagain (@MatCallagain) on CodePen

[mvaneijgen]

Seems like a webkit render issue, see https://stackoverflow.com/questions/25891362/transition-on-transform-with-border-radius-and-overflow-hidden-doesnt-work-in-s

 

Adding -webkit-mask-image: -webkit-radial-gradient(white, black); to the element with the border radius, seems to fix the issue. 

 

See the Pen poOBaRd by mvaneijgen (@mvaneijgen) on CodePen

[mcallaghan]

Thanks a lot mvaneijgen, looks like it does the trick.
Good job !