Jump to content
Search Community

ScrollSmoother NormalizeScroll iOS bar bug 3.11

james12345 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi Guys,

Hope you're all good.

I've been getting some iOS address bar jitters / show/hide when using NormalizeScroll & ScrollSmoother when upgrading from 3.10.4 to 3.11 (3.11 & 3.11.4). Seems to be pretty solid when using 3.10.4 however I have some GSAP based carousels using draggable with 'type: "x"' and this doesn't seem to work when using 3.10.4, but does when using 3.11. So I seem conflicted on which version to use at the minute. 

I've seen people mention about issues with the address bar on recent versions however haven't come across the draggable type x issue. Has anyone else seen either of these / know anymore or know of any fixes? I would remove the ScrollSmoother & NormalizeScroll for mobile but the sites have a few pinned elements & are using WebGL so seems to be working best with them.

I've tried implementing NormalizeScroll under ScrollSmoother & ScrollTrigger. 3.10.4 seems to work better with ScrollTrigger, but 3.11 seems to have similar results. 

Any help / input would be a massive help as this is a bit of a headache with 2/3 sites I have ongoing ATM.
Cheers! 

Link to comment
Share on other sites

Hi,

 

It’s really hard to troubleshoot an issue without a minimal demo. If you can please provide one that illustrates the problems you’re having.

 

In the meantime the only advice I can give you is to try the latest beta versions of GSAP, ScrollTrigger and ScrollSmoother (this will work on codepen, codesandbox, stack blitz and localhost):

 

https://assets.codepen.io/16327/gsap-latest-beta.min.js
https://assets.codepen.io/16327/ScrollTrigger.min.js

https://assets.codepen.io/16327/ScrollSmoother.min.js

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo, thanks for the speedy reply! 

Of course, I just wasn't sure initially if it was a semi known issue & also wasn't sure how to show the draggable with 'type: "x"' issue in 3.10.4 / these jitter issues not happening with 3.10.4 versions.

But here's a pen:

See the Pen BaOoapZ by jamesstudiothis (@jamesstudiothis) on CodePen



The issue happens when scrolling over the '.container--counter' divs on iOS and is intermittent, you may have to scroll a few times. I've included a video so you can see it happening too. As you can see I had to scroll a few times for it to happen, but this seems to be more apparent / frequent on my live / bigger sites:
https://www.dropbox.com/s/wqw1rrqi0ob63ic/RPReplay_Final1676705134.MOV?dl=0

I also tried those beta versions with no change sadly.

Again, thanks for any help!

Link to comment
Share on other sites

Haha, sorry. But of course—no worries. 

Any idea if / when there might be a fix for this (rough timeline, I know hard to know right now)? — I just have a couple of projects on right now and wondering about smooth alternatives and if needed.  

Or alternatively any idea what the Draggable, type: "x" / ScrollSmoother issue could be with 3.10.4? Is there an easy way to use the 3.10.4 CDN for a pen? 

Thanks again.
J

Link to comment
Share on other sites

Hey, @james12345. Sorry about the frustration/delay. We're definitely looking into it. This is a high priority, and we're very active in maintaining things. I'll dig into this tomorrow (it's 2am and my brain is turning off) and get back to you with more info as soon as possible. The scrolling stuff, especially on mobile devices, is extremely complicated. Thanks in advance for your patience. 

  • Like 1
Link to comment
Share on other sites

You can access specific version from a cdn here

https://cdnjs.com/libraries/gsap

As an option, you could only initiate smooth scrolling on non-touch devices and wider screens using matchMedia - personally this is the approach I take on sites I build as I tend to limit down animation to the essential on IOS. If the site is more animation heavy you may still benefit from smooth scrolling/normalizeScroll on mobile though.

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

  • Like 1
Link to comment
Share on other sites

Thanks @GreenSock! Not to worry at all—definitely know the 2am coding hole! haha.

 

If there's anything I can do to help / debug / test—I'm more than happy to help. Not just to speed things along, but I know how much of a massive resource & asset GSAP has been for me & our projects, so happy to help and give something back if I can. Feel free to give me a shout back on here, or my other account @jamesstudiothis (didn't realise I was logged in on my old account in this browser), always happy to help. But I'll keep an eye out on future releases either way!

& Thanks @Cassie. Wow, I didn't know Match Media existed in GSAP 🤦‍♂️, I have a very simple boiler plate set up myself for js media queries but this looks like a game changer.—cheers for highlighting. I don't know if it'll be applicable in this case due to the WebGL bits, & some pinning (which are integral, even on mobile) we have going on, but I'll have a play! Big thanks again ✌️

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

First of all, thanks for the videos and the demo, @james12345. Very helpful. 

 

I'm fuzzy on what you mean by this "Draggable/ScrollSmoother type: 'x' problem" - do you have a minimal demo showing that? 

 

Looking into the jitter thing on iOS with normalizeScroll(). I'll let you know when I have more answers. Thanks for your patience. 

  • Like 1
Link to comment
Share on other sites

Thanks @GreenSock! Really appreciate it.

And re. the "Draggable/ScrollSmoother type: 'x' problem", now I've got it into a pen, I actually think it's a Draggable/NormalizeScroll issue. This is fixed since 3.11, so totally understand it's probably not urgent right now. It was just, this was the reason I updated to 3.11.4 from 3.10.4, so if there was a 'quick fix' with this on 3.10.4, I'd be happy to keep with 3.10.4 until the iOS jitter thing was fixed. (or perhaps, it might actually help get to the bottom of the iOS jitter thing in some way?)

Here are the two pens with 3.10.4 & 3.11.4. If you try on iOS, Draggable type: x doesn't seem to work with 3.10 & NormalizeScroll. Included videos as well for reference. As you can see you can still scroll up and down, while dragging.

3.10.4:

See the Pen xxaOjdN by jamesstudiothis (@jamesstudiothis) on CodePen


https://www.dropbox.com/s/gin43gz7glg9ymj/RPReplay_Final1677180912.MP4?dl=0

3.11.4:

See the Pen GRXgYJK by jamesstudiothis (@jamesstudiothis) on CodePen


https://www.dropbox.com/s/e88mi4ygudo9q4u/RPReplay_Final1677180966.MP4?dl=0

Like I say, totally understand this isn't as urgent as the the jitter thing on iOS as it's now fixed any way on 3.11 anyway—but wondered if there was a known fix with 3.10 or perhaps it could help in some way?
Cheers!

Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

Thanks for your patience, @james12345! After a lot of digging, I'm pretty confident I figured out the issue and got it resolved in the next release. You can preview that here: https://assets.codepen.io/16327/ScrollTrigger.min.js (you'll probably need to clear your cache)

 

Can you reproduce any trouble when you drop that file in? It seems to resolve things for me. 

 

I can give you an explanation if you're curious, but it's rather complicated so I'll spare you if it's not something you really want to dig into :)

 

I'm hoping that resolves everything. This is the one thing I was waiting to resolve before pushing out 3.11.5, so I'd love to hear back from you about whether or not you can reproduce any issues at all with the beta file. The GSAP core beta is here: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

  • Like 4
Link to comment
Share on other sites

Hi Jack,

Thanks for getting back to me and appreciate the effort all round. Unfortunately though this doesn't seem to have solved it for me, and fairly confident it isn't a caching thing. Cleared cache for Safari iPhone, tried in Chrome on iPhone (for the first time) and on a second device. Maybe someone else can try to confirm though? 

See the Pen gOdoRxy by jamesstudiothis (@jamesstudiothis) on CodePen



Hoping I'm wrong and this is the fix though :)
Let me know if there's anything else I can do or any other debugging! 

Link to comment
Share on other sites

Hm, here's a fork with a cache-busting URL. Can you please verify that you can still break it? Is there any secret to getting it to break? I have scrolled up and down like crazy for several minutes and can't seem to replicate the issue even once: 

See the Pen vYzpqdV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is there any chance you could provide a screen recording? Thanks for your help!

  • Like 1
Link to comment
Share on other sites

While testing this version of the scrollTrigger, I noticed that sometimes there are problems with scrolling when the smoothTouch option is enabled. Sometimes, at the first loading, scrolling practically does not work.

On my video, the problem was reproduced the second time. The first time the page loads, I make a strong swipe with my finger and the page scrolls normally. The second time the page loads, I make the same strong swipe with my finger, but the page barely budges (as if I made a light touch with my finger on the screen). After a few touches, the scroll starts working normally.

Video

See the Pen yLxvObG by lexa18 (@lexa18) on CodePen

 

Link to comment
Share on other sites

Hi Jack, apologies are in order. This must have been a caching issue (unsure how on the new device 🤷‍♂️), but this seems to be working great now, even on my pen & on my original device. Feeling really, really solid!!
Similar to you, scrolled up and down for a couple of minutes and it's seeming great (seemed to break after 4/5 scrolls previously). So yeah, feeling really solid and a huge improvement! Big thanks to everyone involve on the fix—really looking forward to the release.

✌️

  • Like 3
Link to comment
Share on other sites

On 3/12/2023 at 6:57 AM, coolDev said:

While testing this version of the scrollTrigger, I noticed that sometimes there are problems with scrolling when the smoothTouch option is enabled. Sometimes, at the first loading, scrolling practically does not work.

On my video, the problem was reproduced the second time. The first time the page loads, I make a strong swipe with my finger and the page scrolls normally. The second time the page loads, I make the same strong swipe with my finger, but the page barely budges (as if I made a light touch with my finger on the screen). After a few touches, the scroll starts working normally.

 

@coolDev - a few questions: 

  1. Are you saying that this ONLY happens with the beta file? 
  2. Is there a chance that your touch initially was slightly more horizontal than vertical? By default, ScrollTrigger.normalizeScroll() has its lockAxis enabled in order to ensure that scrolling only goes in one direction. It measures the first move and whichever is more (horizontal or vertical) gets locked in for that particular touch. I've had it happen where I inadvertently made my finger go a little more horizontal (at first) and then made a big swipe up/down and it seemed to not work but that's just because the axis was determined to be horizontal for that move. You can set lockAxis: false if you prefer to skip that behavior, like ScrollTrigger.normalizeScroll({lockAxis: false});
  3. I'm just curious why you'd be using a smoothing amount like that on touch devices. It's not "wrong" or anything - I'm just curious :)
Link to comment
Share on other sites

1. This happens with this version of the beta file. In which you have made corrections regarding this topic. Before that, I did not notice such problems. Previously beta version 3.11.5 worked correctly.

2. No. When I ran my tests, my phone was on the table and I swiped my finger vertically across the screen. There was no horizontal movement.

3. Don't know🙂 I find this smoothing to be pleasant. When testing on a touch device, there is no discomfort.

 

Link to comment
Share on other sites

Hi guys,

Just thought I'd chip in with this one & testing. Tested in Safari, must of refreshed about 50 times, and open and closed tab around 20, & also tested in Chrome Firefox, & Edge, on mobile. I couldn't replicate this, unless as Jack mentioned I was doing a diagonal scroll and it was registering it as x axis, but this seemed fairly to be expected I thought. I did occasionally notice a tiny jump on initial touch, which I assume is the browser catching up with smoothtouch, but this really was very insignifiant and probably wouldn't have noticed unless I was purposefully looking out for something (or if using less smoothtouch)—this REALLY wasn't an issue, I just wasn't sure if the two could be linked in some way? 

Pen I was using 

See the Pen gOdoRxy by jamesstudiothis (@jamesstudiothis) on CodePen



Like I say, all looking good I thought though.
J

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...