Polyfill not working on Safari 15 (iOS & macOS)

[martinzen-rf]

I just compared the behavior with the previous versions of Safari, both mobile and desktop and smooth scrolling no longer works via this polyfill.

I can provide a CodePen if needed, let me know.

it is working http://iamdustan.com/smoothscroll/

The issue is safari itself - it changed its behaviour. If you have say snapping enabled then the plugin won't scroll smoothly anymore b/c Safari seems to ignore scrollTop/scrollLeft values if they fall below the threshold.

P.S.: if you look at the source you will notice all the lib does is it sets the values to scrollTop or scrollLeft ...

[phtmgt]

@8thblock I don't have snapping enabled and it still does not work. It's true http://iamdustan.com/smoothscroll/ works for me. However, I have no idea how it's breaking in my case.

[eHtmlu]

@plamenh In my case it didn't work because I mistakenly assumed it was a full polyfill for smooth scrolling, so I thought I don't need any additional JavaScript if I set the scrolling behavior via CSS.

After using the functions that are described on the http://iamdustan.com/smoothscroll/ page it worked (at least after fixing my second mistake, because I forgot the option: { behavior: 'smooth' } ).

[phtmgt]

@eHtmlu Thanks for the tip. For anyone with the same issue, use this: https://jonaskuske.github.io/smoothscroll-anchor-polyfill

Opting for different polyfill is not the solution. The library does everything correctly from the coding standpoint. Can you post a snippet that reproduces the issue? Cheers

…

On Oct 8, 2021, at 06:09, Plamen Hristov ***@***.***> wrote: @eHtmlu <https://github.com/eHtmlu> Thanks for the tip. For anyone with the same issue, use this: https://jonaskuske.github.io/smoothscroll-anchor-polyfill <https://jonaskuske.github.io/smoothscroll-anchor-polyfill> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#177 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AROWWFA7LUB6BYI2WIQVFZLUF27NDANCNFSM5ETJWVKA>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[phtmgt]

Yeah, the library works fine. Apparently it was not clear (to me at least) that this works only on programmatic use (i.e., window.scrollTo()) and is not working out of the box for anchor links (in my case). The second polyfill enables the smooth scroll behavior on anchor links and is used on top of this polyfill, not instead of it.

[apithy-isidro-martinez]

im using this library https://vue-horizontal.fuxing.dev/ that uses this Polyfill but I don't see how to make it work, does anyone have any ideas?

[jackhair]

Everything worked fine prior to Safari 15, but now the behavior: "smooth" doesn't seem to be respected any more.

this.elementRef.scrollTo({
    left: position,
    behavior: "smooth",
});

[mnieznaj]

Same issue, smoothscroll broke down on safari 15

[Travis-ko]

Hey all, after some tedious testing I found that Polyfill does in fact work on IOS safari 15. The actual issue is that Safari In macOS Monterey and IOS 15 doesn't seem to be working with scroll-snap, and the reason that the example site works is because it actually isn't using scroll snap (which a lot of people use this Polyfill with). This might be why using an anchor worked for @plamenh, and why @apithy-isidro-martinez is having his bug with vue-horizontal (which seems to rely on scroll-snap).

TL;DR
css scroll-snap is broken in MacOS Monterey and IOS 15 when used in conjunction with scroll functions and will cause elements to jump if used.

[larzon83]

I too use vue-horizontal and scroll-snap is also broken with Safari 15 on macOS Catalina :/

[isidorosrigas]

I had the same issue with this polyfill on macOS Monterey and Safari 15. Thankfully it's just one of the many bugs of Safari 15. I tried this polyfill on the next version of Safari, v. 15.4 (release 134), that's currently being tested as a public beta and the polyfill works as expected (at least for my use case)! So please don't freak out (like I did) and install the Safari Technology Preview to test your website.

[littleStudent]

Just a heads up, it is still broken for me in safari 15.4

[mattpilott]

Works for me in 15.4 using scrollBy in a container that uses scroll-snap