Long Page with scrollTrigger jumps on IOS when scrolling ends

[TCharli]

Hi! We are developing a long onepager with scrolltrigger. Many sections are pinned this way:

 

ScrollTrigger.create({
trigger: ".panel_riddle",
start: "top top", 
pin: true, 
end: "+=100%"
});   

 

This page is currently 20000px long on the iPhone. Everything works fine on desktop, but when scrolling fast on ios (safari and chrome) there is a problem. When scrolling fast down and up one after the other, the website jumps to another y-position when the scrolling ends.
I already tested the GSAP helper functions "stop overscroll" and "stop resizing window", but the problem remains. 

 

Strange thing is that the yScroll value of the page stays the same before and after the wrong jump. So for example fast scrolling to yValue 17500, then the page jumps a bit further or back and the yValue is still 17500 from above.

 

Does anyone know if this is a general IOS bug in interaction with scrolltrigger, or in which direction we have to think. Thanx a lot.

 

Attached a video from this behavior at the page bottom. In the upper left corner you can see the page yScrolling value. 

 

[OSUblake]

Hi TCharli,

 

Check out the new normalizeScroll behavior that was added to the latest version of ScrollTrigger, v 3.10.x. It also list some of the iOS bugs at the bottom of the page.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

 

 

[GreenSock]

Yep, Blake is exactly right and you might also want to check out the brand new ScrollTrigger.config({ ignoreMobileResize: true }) option in 3.10+. 

[TCharli]

Thank you both very much. Finally, this hint (ignoreMobileResize) has eliminated it.