scroll skips on ios devices

[J00]

hi,

I have a problem on ios devices with scrollTrigger, when I scroll, scroll suddenly  skips or jumps, I have no idea why this happens because the code I wrote is only this.

 

There's a video at the bottom that you can see what I mean. 

Thank you for your attention:)

 

gsap.timeline({

scrollTrigger:{

trigger:'#s0',

scrub:true,

start:'top top',

end: 'bottom -220%',

pin: '#s0',

}

})

// .to('#photo1',{maskImage: 'linear-gradient(rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0) 50%)'})

.to('#photo1', { opacity: 0 });

[ZachSaucier]

Hey J00 and welcome to the GreenSock forums.

 

That is very curious behavior. Can you please create a minimal demo that recreates the issue for us to test? This thread covers how to do so:

 

[J00]

Thank you very much for the quick reply,

 

yes I have uploaded the minimal code on CodePen, however it doesn't preview well so I have uploaded the same stuff on server by using Netlify.

 

CodePen Link:

See the Pen pobBJyL by kazuki-kurimoto (@kazuki-kurimoto) on CodePen

 

Netlify Link:

https://ecstatic-fermi-e7a4b8.netlify.app

 

I have opened the Netlify link with my iphone7 and ipad Pro (both has latest os), and scroll fast or scroll fast and stop, the same bug happens.

You might recognize that the right indicator bar skips or go back without scrolling.

 

Again thank you very much for your support.

 

 

 

[ZachSaucier]

I'm not seeing that issue on an iPhone in your Netlify or CodePen versions (by the way, replacing /pen/ with /debug/ in the CodePen URL gives you a full page view). Can you give any other relevant information to help us recreate the issue? Does this issue happen on different devices for you? Is the iOS version relevant? Are there any particular steps to recreate the issue?