ScrollTrigger mobile browser issue

[Lovestoned]

Here is my pen. I having problems on mobile browsers. There is flickering when scroll. Black menu button and its click animation is important for me. That is why I used .allsitecontent div. If problem occurs because of this div I can change my menu scenario. But if I can make it with container div, it is best for me.

 

Another problem is : If I scroll fast when orange section reached top of the viewport, happening kind of jump towards to bottom. This jumping problem occurs only android devices chrome browser. My device OS is : Android 11.0 and Chrome version is  : 88.04324.181

 

I have also have ios and android 8.0 devices for testing. There is no problem. But flickering happening on all mobile browsers.

 

Thanks all..

See the Pen MWbPxga by ersenturgut (@ersenturgut) on CodePen

[GreenSock]

I don't have time to dig into this right now, but I wanted to quickly point out that you've got scroll-behavior: smooth in your CSS which is definitely a no-no. Does the problem go away if you eliminate that? 

 

I'm also very curious about why you're using jQuery.animate(). GSAP is up to 20x faster and WAY more flexible

 

Lastly, I suspect that the "flickering" you mentioned likely has to do with the fact that most modern browsers use a different thread for scrolling, thus anything you do on the JavaScript level won't be perfectly synchronized with the scroll thread. That's one of the reasons why ScrollTrigger uses position: fixed on pinned content. But if you're using a nested element as the scroller, position: fixed often doesn't behave the way you'd expect because if there ANY transforms applied to that scroller (even transform: translate(0px, 0px)), it creates a new stacking context and the position: fixed element will move with that scroller. That has nothing to do with GSAP/ScrollTrigger. Since you're using a nested scroller, transforms are used to do the pinning but perhaps on the browsers you're looking at, they handle the scrolling thread in a unique way that is non-synchronized. 

 

You could try setting pinType: "fixed", but be careful because fixed positioned elements can be stacked on top of everything else, obscuring pointer events. So in this case, you might spin your mousewheel and nothing happens because that event is getting absorbed by the position: fixed (pinned) element. You could set its z-index to a lower value so that it sits "behind" the scroller, but then you lose mouse interactivity with the content of your pinned element. A solution there is to manually listen for "wheel" events and use those to scroll the content below it. Here's a fork with those changes in place: 

See the Pen e9e4fa34f3dc557a600abe4fbef56e01?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that work any better for you? 

[Lovestoned]

Hi Jack

I tested your code on my page. Dektop chrome is ok. Desktop Firefox scrolling too slow I think because of calculating. iPhone 5 ios device safari and chrome it is working good. But android device chrome browser I cannot scroll.

[Lovestoned]

Hi again

This is the best result I could get. You can check my pen. Only one problem : android 11 chrome 88 jumping issue still exist...But when I browse my pen from this device and browser on codepen results pane, there is no problem. Maybe this will give you an idea.

 

thanks.

[tailbreezy]

Hello there,

Please use the fork button in Codepen when fixing/updating your issues, so that there is history of the problems you had in order to benefit others seeing this in the future.

[Lovestoned]

I cliked yes...

[Lovestoned]

I discovered something : I added third section .panel3...when I scroll fast again, orange panel not jumping but green panel jumping when reached top of the viewport...it is happening on last section...and only happening if I turn back to page top as page loaded...If I don't turn back all there is no jumping...I hope I can explain...I forked...

[GreenSock]

18 hours ago, Lovestoned said:

Hi Jack

I tested your code on my page. Dektop chrome is ok. Desktop Firefox scrolling too slow I think because of calculating. iPhone 5 ios device safari and chrome it is working good. But android device chrome browser I cannot scroll.

Right, sorry, I didn't intend this to be a finalized thing. You'd need to add in touch-scrolling similar to what I did for the mousewheel stuff. Listen for pointerdown/touchstart, then on ever pointermove/touchmove you'd update the position, etc. It's not really something I have time to build out for you, but that's the concept. 

 

The whole point is that you're trying to put everything into a scroller container which complicates things, and to avoid the funky browser non-synchronized scrolling thread, you need position: fixed on the pinned element, but that obscures pointer events and scrolling so you must handle that. 

 

Another idea is to set pointer-events: none on the pinned element, but you'd have to specifically set pointer-events: auto on your menu so that it's still clickable. Here's a fork: 

See the Pen b57adb27b6e7b4a548990ec63262ecf7?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You'd have to fix how you're handling the opening/closing there because animating the "left" property of the allsitecontent wrapper won't affect the element with position: fixed. so you'd need to do that one explicitly. 

 

Anyway, I hope that at least gives you some ideas.