Gsap snap very buggy on mobile devices

[lumuxd 6 Likes (Newbie)]

Hi,

 

I coded something with gsap and the page is snapping to the nearest element when a scroll ends. It works perfectly on Desktop but it is very buggy on my mobile with safari and chrome. The snapping is very laggy, the page jumps a bit up and down and sometimes the snapping won't work at all. 

 

Is there maybe any common issue with gsap snap on mobiles, which I may have been doing wrong while coding the desktop version?

(In my codepen there is called a background-image change every time a snap is completed, you can ignore that.)

 

Thank you in advance!

See the Pen NWgMWbK by m44244 (@m44244) on CodePen

[lumuxd 6 Likes (Newbie)]

8 minutes ago, lumuxd said:

It works perfectly on Desktop but it is very buggy on my mobile with safari and chrome. The snapping is very laggy, the page jumps a bit up and down and sometimes the snapping won't work at all.

I just realized that the codepen works fine on mobile but I don't know how I can illustrate that problem with opening the code in a mobile browser..

[Cassie 5,122 Likes (Superhero)]

Hi Lumuxd -

Just to clarify - the codepen example is working but your local version isn't?

[lumuxd 6 Likes (Newbie)]

Hi @Cassie,

 

thanks for getting back to me, I published the website on a private server which I unfortunately cannot share here. There it is not working at all. The scroll is very laggy.

[Cassie 5,122 Likes (Superhero)]

Ah ok, tricky.

Well if it's working in a minified codepen demo but not on a live site - there's something else going on.

• Maybe the background images you're swopping out are very large in file size?
• Have you possibly got scroll-behavior: smooth in your CSS? That can sometimes cause issues.

I'm afraid I can't really help much more than this seeing as the example provided works.
 

[lumuxd 6 Likes (Newbie)]

I just tried to run it with 8kb small images but the problem is the same. The page jumps several times before it snaps onto a word. 

scroll-behavior: smooth was also not in my css code but thanks for checking that.

 

Do you maybe know an alternative to codepen where I can host the code for testing purpose?  

 

Thanks!

[Cassie 5,122 Likes (Superhero)]

There's codesandbox? https://codesandbox.io 

I'm afraid we won't be able to dig in and help you figure this out though - we don't have the resources to look through hundreds of lines of code - especially if the GSAP code is working in a reduced example.

I would suggest gradually adding more code to the example that's working until you hit a point that it breaks. It's tedious but pretty foolproof.

[lumuxd 6 Likes (Newbie)]

Thanks for the tip, here's the link: https://codesandbox.io/s/async-voice-o3h0l?file=/index.html

 

I think there was a problem with loading gsap correctly but snapping works the same and on mobile perfectly too.

I don't know where the problem is.. 😕

[nico fonseca 518 Likes (Leader)]

I think you see a different behaviour in your site/Codepen because Codepen uses an Iframe. You can check, for example, the Codepen full page vs the CodeSandbox full page (no iframe). I tested it on my iPhone and the behaviour is completely different.
 

Making an infinite scroll on mobile it can be a very hard task, more if you use a native scroll. I made it here https://danielebuffa.me/list/ and I wanted to cry. My recommendation is to try to make your nice effect only for desktop, and on mobile remove the infinite scroll so you can save yourself from a lot of headaches.

 

[GreenSock 18,251 Likes (Superhero)]

You should definitely not be loading the old TweenMax and TimelineMax files. Big waste and could very well be causing problems since you're also loading the more modern GSAP 3.7.1 which duplicates many of those old legacy tools. 

[lumuxd 6 Likes (Newbie)]

Thank you @nico fonseca and @GreenSock,

 

I already tested removing the infinite scroll but this was not solving the problem...

 

I made a litte video which shows the problem very well. As soon as I scroll the site on my mobile, the body moves up maybe because of the Safari UI and as soon as the wheel/scroll stops, the container (selected blue box) jumps up or down. 

 

(The dark background is just a small image which is called when a snap is completed – it disappears through the jump too.)

The container (selected blue box) has a height of "100%" and I already tried other values like "100vh" or "auto".

 

Maybe this helps to find the problem here..

 

Thank you!

[GreenSock 18,251 Likes (Superhero)]

If I understand you correctly, yes, that's because Safari literally changes the entire height of the viewport due to the browser chrome becoming visible or hiding. ScrollTrigger does a "soft" refresh in that case, meaning it WAITS until the scrolling stops before it fires its refresh() to re-calculate all the positions, otherwise Safari would suddenly stop the momentum-based scrolling. Either way, you'd have a jump because of the browser resizing everything. That's not a bug in ScrollTrigger. 

 

If you don't want ScrollTrigger to refresh() automatically when the window resizes, you could: 

ScrollTrigger.config({autoRefreshEvents: "DOMContentLoaded,load,visibilitychange"});

But that's generally a very bad idea because when the window resizes that normally affects all the scroll positions of things and you'd want ScrollTrigger to recalculate accordingly. 

 

Another option is to find a way to prevent Safari from hiding the browser chrome. I think @OSUblake said that one way to do it is wrap everything in a <div> that's set to position: fixed and then have that be the thing that does the scrolling instead of the <body>. 

[OSUblake 18,475 Likes (Superhero)]

20 minutes ago, GreenSock said:

I think @OSUblake said that one way to do it is wrap everything in a <div> that's set to position: fixed and then have that be the thing that does the scrolling instead of the <body>. 

 

I usually set the body to fixed, but it might work with just a div. The point is prevent the body from scrolling by using a different scroll container.

 

See the Pen jOwxwKq by GreenSock (@GreenSock) on CodePen

 

With ScrollTrigger, you will need to set the scroller property because it will be different.

 

[lumuxd 6 Likes (Newbie)]

Thank you, that makes sense! 

 

So I have wrapped everything in another div and then set the div to postition: fixed. What else do I have to change? I did not managed to make the wheel scrollable yet... 

@OSUblake which value do I have to set for "scroller:" ?  I tried "scroller: '#wrapper' but then the wheel disappears at all.

 

Thank you in advance!

[Tagliavia 10 Likes (Newbie)]

I had a similar issue on iOS, tried the 100vh height solution but it made no difference, in fact it actually affected the design since on scroll down you will see an empty space where the safari app bar pops up.

However as weird as it sounds having absolutely placed items displaced with yPercent or y below the confines of the pinned element caused the problems with "labels" and "directionalLabels" snapping.

After changing the elements height to keep them in the bounds of the pinned element snapping worked perfectly. 

 

Also had some very jumpy pinning of the container which was caused by an image that modified the height of the dom on render, so I would recommend to have a placeholder for the images just in case.

[OSUblake 18,475 Likes (Superhero)]

In my example, the scroller would be the content-wrapper, and the content could be considered your body element.

 

See the Pen jOwxwKq by GreenSock (@GreenSock) on CodePen

 

[lumuxd 6 Likes (Newbie)]

Hey @OSUblake, 

 

thank you first of all for your suggestions and sorry that I did not answered yet.

 

I think that your technique is working for me but I'm still not there. In my code I tried to change the scroller and tried many things like setting different element's position to fixed etc. But I always end up with a smaller box on the screen where I can scroll or just a completely blank screen.

 

I posted my code in the following pen and I'd be very happy if you could take another look at it as I am running out of options...

 

Thank you so much in advance

 

See the Pen abwrYOZ by m44244 (@m44244) on CodePen

 

[lumuxd 6 Likes (Newbie)]

I just updated the pen with my latest solution and it works more or less.

 

The problem is still, that my iPhone sometimes thinks that I want to refresh the page by swiping up (in the newer iOS Safari and also chrome). So the page sometimes detects a scroll on the body (exactly between two words) and sometimes a scroll in the container. 

 

Do you have any idea how I can make clear that I only want to scroll in the container haha?

Thanks! 

[Cassie 5,122 Likes (Superhero)]

It's very difficult to debug specific device/browser bugs, and as this issue isn't GSAP-related it's a little out of the scope of the forums to help. 

 

That being said - maybe setting overflow:hidden on the body would work - that effectively disables the scroll.

[shikari 6 Likes (Newbie)]

Hi @lumuxd. Did you manage to solve your problem?

 

[shikari 6 Likes (Newbie)]

@lumuxd

[lumuxd 6 Likes (Newbie)]

Hey @shikari, I did not really remember but I think wrapping everything inside another container worked for me and maybe try to set overflow to hidden to disable scrolling.