Jump to content
Search Community

Smoothscroll and Safari 16.0 (released yesterday)

mimeartist test
Moderator Tag

Recommended Posts

Is anyone else getting weird results on Safari with the new version 16.0.... I've been working on a site for the last couple of weeks and everything was fine, but today I've noticed when I scrolled on my build that it wasn't scrolling?!?!

 

I can't share the code... however when I looked at this demo... it's working in Chrome but not Safari? Anyone else getting the same?

 

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

Link to comment
Share on other sites

Wondered why normalizeScroll wasn't working... was using the English spelling normaliseScroll...

 

Fixes my issue for MacOS, however 'normalizeScroll' is now breaking my scrollTo with smoothscroll on iOS... It seems to not want to redraw the screen (I've a fixed image underneath the scroller, and it doesn't remove it?)

 

Is there a simple way of normaliseScroll only run on mobile?

 

James

Link to comment
Share on other sites

I'm zeroing in on the Safari 16 bug (super weird - definitely a Safari problem, not GSAP). Stand by.

 

As for normalizeScroll causing a problem for you on iOS, can you please provide a minimal demo that clearly shows the issue? 

 

If you want to only do certain things on touch devices, for example, you can use ScrollTrigger.isTouch to run conditional logic. 

  • Like 1
Link to comment
Share on other sites

Gosh, that took a lot of effort to chase down...here's the minimal demo that isolates the issue and proves that it's totally unrelated to GSAP: 

 

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

 

In Safari 16, if you set overscrollBehavior to none on the body/html, and then set scrollTop of a fixed element, it totally breaks the scroll of the entire page!

 

Pretty weird, right? 

 

I reported it: https://bugs.webkit.org/show_bug.cgi?id=245300

 

Now to find a workaround...

  • Like 3
Link to comment
Share on other sites

Indeed! Honestly, Safari has been just terrible to work with for years. Major bugs are still present years after being reported. Show-stoppers. We've tried reaching out to them on a bunch of occasions directly but have been largely ignored (or maybe they're not getting our messages). 🤷‍♂️

 

I hope to have some kind of workaround in the next release, @mimeartist. In the meantime, this seems to fix things in the current version: 

ScrollTrigger.addEventListener("refresh", () => {
 let wrapper = smoother.wrapper();
 wrapper.style.pointerEvents = "none";
 setTimeout(() => wrapper.style.pointerEvents = "all", 50);
});

 

Does that resolve things for you? Obviously "smoother" is your ScrollSmoother instance. 

Link to comment
Share on other sites

The workaround doesn't work for me, but I've been doing lots of workarounds myself with parts of it, so I wouldn't take that as written. One of the issues I've resolved is by scrolling using gsap and scroll to, rather than the scroller, and that seems to iron out issues with the normaliseScroll I was having and I can still have the nice smoothness.

Link to comment
Share on other sites

8 minutes ago, mimeartist said:

The workaround doesn't work for me, but I've been doing lots of workarounds myself with parts of it, so I wouldn't take that as written. One of the issues I've resolved is by scrolling using gsap and scroll to, rather than the scroller, and that seems to iron out issues with the normaliseScroll I was having and I can still have the nice smoothness.

Hm, are you positive? With my workaround in place, I can't seem to break it. Got a minimal demo I can look at that shows the workaround in place but with it still broken in Safari 16? 

 

I just updated the CodePen-only beta file with the workaround (internal) and it seems to work for me: 

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

 

Link to comment
Share on other sites

On 9/17/2022 at 1:12 AM, GreenSock said:

Hm, are you positive? With my workaround in place, I can't seem to break it. Got a minimal demo I can look at that shows the workaround in place but with it still broken in Safari 16? 

 

I just updated the CodePen-only beta file with the workaround (internal) and it seems to work for me: 

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

 

 

 

 

This demo doesn't scroll on my Mac... also I'm a little confused about whether I've been using normalise or normalise Scroll... so will need to test my stuff again just to make sure I've not been testing without having it set etc... I think when normalizeScroll is correctly set the url bar in safari on an iPhone no longer shrinks, interestingly (From the documentation it previously stated this was not possible to stop from shrinking)

Link to comment
Share on other sites

50 minutes ago, GreenSock said:

Are you absolutely positive that you cleared your cache and aren't accidentally using an old file? I'm on a Mac, Safari 16, and it works great. Scrolls fine. Can you also please confirm which URL you're looking at exactly? 

 

Just tried it again on my daughters iMac that has never been on this page, and it was working 'occasionally'... however it does work when you click and open it in it's own window?!?  Sorry for possibly giving a false negative, but perhaps it's to do with the embed... one one occasion it worked when I clicked the 'rerun' button while embedded on the forum... they both work when opening in a new window.

 

Update (as writing this) Was just about to post the two embeds to show the one that works and the one that doesn't when embedded and realised they're the same embedded URL... so it must be something weird going on with the embeds in the forum? 

 

Link to comment
Share on other sites

1 minute ago, mimeartist said:

Was just about to post the two embeds to show the one that works and the one that doesn't when embedded and realised they're the same embedded URL... so it must be something weird going on with the embeds in the forum? 

Can you be specific? I'm not sure what you mean. You post two completely different CodePen URLs into your response, but after you submit your reply, it makes them both identical?

 

I'm super curious to find out how to replicate both of these problems (the CodePen embed and the updated/fixed ScrollSmoother NOT working on a Mac in Safari 16).

Link to comment
Share on other sites

No... sorry... the two embed on this page are of the mountain parallax scroll demo, the first one works in the page but the second one doesn't. So I assumed they were different demos. However when I looked at the URL's they were the same. e.g I use the scroll wheel over the one at the top of this page, and it scrolls, but the second doesn't.

 

The second embed (Posted Saturday at 01:12 AM) doesn't work but the first does. It obviously works when you click 'edit on codepen' and it opens in a new window.

Link to comment
Share on other sites

I apologize if I'm being dumb here, but I want to make sure I clearly understand what you mean by "first" and "second" - can you please post the URLs, like this?: 

 

ALWAYS WORKS
BROKEN

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

 

And to confirm, that first one consistently works for you everywhere you've tested, right? Earlier you said things were intermittent. 

 

What would be amazingly helpful if if you spell it out as explicitly as possible, like "This URL works intermittently: ____, and to reproduce the problem you can follow these steps ___"

  • Like 1
Link to comment
Share on other sites

Ok, in this case I think it's better I not post any more pens as it's going to confuse things even more... they're all the same codepen which makes describing this even harder, so even though it's possibly not a gsap issue, it perhaps comes across as one because the embeds are acting strangely and giving false negatives.

 

So....

 

1. On this page we're on now, there are several (now 3 since your last post) embed code pens called Image Parallax (url ending /PoOpobM).

 

2a. The second of these code pens intermittently doesn't work in safari.

 

2b. On my daughters iMac the 2nd one doesn't seem to ever work with the mouse wheel scrolling.

 

2c. On my MacBook, it's intermittent with the trackpad scroll wheel (but more often that not it doesn't work) 

 

3. When opening the codepen in a new window it works every time (only tested on my iMac)

 

 

 

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...