ScrollTo issues on iphone

[mmussmann]

I'm experiencing flaky ScrollTo animations on iphones. On our site the animation works sometimes and others they don't. But when trying to do the same on the gsap example it appears to never work.

This is the line of code: TweenLite.to(window, .4, {scrollTo: position.y + yModifier})

How to reproduce:

1. Start browser stack (iPhone XS - Safari/Chrome)
2. Go to https://codepen.io/GreenSock/full/LkOrKY
3. Click sections

Expected: Scroll happens

Actual: Nothing happens.

I'm not sure what is up, if it's a limitation related to iphones but I can't figure out why the animations sometimes work and others don't, also why does it not work at all in the example. I have tested this by just running the command in console so it's not related to unloaded JS or anything. I can run in e.g. 5 times maybe it work 2 and 3 times does nothing.

[jackdoyle]

Sorry about the confusion there - it actually appears to be a codepen-specific bug (on iOS). For some reason (and I'm waiting to hear back from them about why), Codepen FORCES this CSS:

body, html {
    height: 100%;
}
body {
    overflow: hidden; 
}

Thus it won't allow scrolling on iOS Safari unless you kick codepen over into debug mode!

Another thing to keep in mind is that iOS Safari often mis-reports the current scrolling position which can cause the autoKill feature to kick in when it probably shouldn't. Have you tried setting autoKill:false on your scrollTo tweens? Kinda like:

TweenLite.to(window, .4, {scrollTo: {y:position.y + yModifier, autoKill:false}});

[mmussmann]

@jackdoyle That seems to be the fix, sorry for missing that in the documentation. But thanks for the help.

[jackdoyle]

No problem at all, @mmussmann. Cheers!