ScrollTrigger Element with Scrub: true causing text blur/ wobble on IOS devices.

[synthwavenomad]

Hi, I have created a mock-up to protect my clients site but in the codepen mock-up you can see this issue occurring on Apple Devices, safari on an iPad is one specific example, it causes the text to wobble a little or blur. Why might this be happening?

Any and all help will be greatly appreciated. 🙂

See the Pen gOJVEPj?editors=0010 by StartCatalyst (@StartCatalyst) on CodePen

[Cassie]

Hey!

 

Safari really struggles with 'pseudo pinning' - animating something so it's moving against the scroll and looks like it's stationary. This is largely because safari misreports scroll values.

We've tried to work around this with normalise scroll - https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/

 

BUT honestly I would recommend going this route if your structure allows
https://css-tricks.com/the-slideout-footer/

 

Sorry there's not a magic GSAP bullet here

[synthwavenomad]

Thanks @Cassie for your insight. 🙏

I will see if I can rework my production instance to use the sticky trick. ✌️