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.

[ghost]

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

[ghost]

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 https://github.com/iamdustan/smoothscroll/issues/177#issuecomment-938519281, 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

[andrisole92]

Got the same issue! 👍

[isidorosrigas]

Just a small update from me, it may be helpful to some:

• The polyfill seems to work on Safari 15-15.1-15.2 but it won't work if the element is hidden (for a example if it's overflowed). It scroll only to elements that are visible to the user.
• You can verify that it works by visiting this page: https://codepen.io/diyifang/embed/MmQyoQ?height=265&theme-id=0&default-tab=js,result&embed-version=2
• For my use case, I had to remove "scroll-snap-type" from the parent element and it works again now.

From my experience, this polyfill works -without any modifications- on many old versions of Safari and it also works on the upcoming v. 15.4 which has been in development for months now and should be released soon.

[simeyla]

@isidorosrigas As of the final version of iOS 15.4 (released today) CSSOM View Smooth Scolling is enabled by default.

So this plugin no longer has an effect (because 'scrollBehavior' in document.documentElement.style == 'true') unless you have the 'forceSmoothScrollPolyfill` option enabled.

Of course whether or not you keep the polyfill for <15.4 users and for how long is up to you and depends how vital smooth scrolling is for your application.

[andrisole92]

Still not working on my iPhone…

[zac-keakie]

As said above, since safari 15.4, some native functionality for smooth-scroll was added. This overrides the polyfill.

In my case, I was using a combination of overflow-x: hidden and scrollTo({ behaviour: 'smooth' .... This was to disable mouse wheel/track pad scrolling, but allow programmatic scrolling (eg for some Netflix style scrolling buttons).

The new native smooth scroll offered by safari doesn't seem to work when overflow is hidden! Therefore, I have also had to use window.__forceSmoothScrollPolyfill__ = true to force this polyfill to be used instead. And then it's working again, even in 15.4

[miguel-S73]

Thank you @zac-keakie , I apply your solution to my Ionic project.

I put this below lines in file polyfill.ts and work fine:

import smoothscroll from 'smoothscroll-polyfill'; smoothscroll.polyfill(); (window as any).__forceSmoothScrollPolyfill__ = true;

Tested on IOS 15.4

[kalnode]

Sharing my experience:

Before iOS 15.4: For our scroller, we originally had CSS overflow:hidden on the target element and behaviour: smooth in the JS scroll event. This worked in all browsers, and using this polyfill made it work in Safari.

After iOS 15.4: This polyfill ceased working and we removed it, hoping native smooth scrolling would kick-in for Safari. This was not the case: native smooth scrolling in Safari was not working right away.

Solution: Simply adding CSS overflow-x:auto to the scroll container did the trick for native smooth scrolling in Safari; and seemingly has had no effect on other browsers. We're not sure why the container originally needed overflow:hidden in the first place; maybe it was a safety measure to prevent any bleed (something I would have done). In addition, we're fine with older-iOS-version-users not having smooth scroll in the same context, however it would have been nice to continue legacy support via this polyfill.

[zac18992]

Sharing my experience:

Before iOS 15.4: For our scroller, we originally had CSS overflow:hidden on the target element and behaviour: smooth in the JS scroll event. This worked in all browsers, and using this polyfill made it work in Safari.

After iOS 15.4: This polyfill ceased working and we removed it, hoping native smooth scrolling would kick-in for Safari. This was not the case: native smooth scrolling in Safari was not working right away.

Solution: Simply adding CSS overflow-x:auto to the scroll container did the trick for native smooth scrolling in Safari; and seemingly has had no effect on other browsers. We're not sure why the container originally needed overflow:hidden in the first place; maybe it was a safety measure to prevent any bleed (something I would have done). In addition, we're fine with older-iOS-version-users not having smooth scroll in the same context, however it would have been nice to continue legacy support via this polyfill.

Absolutely. This fix is great unless you need to disable X overflow, in which case the native smoothscroll still does not work and you need to force use of the polyfill instead.

[suyalcinkaya]

This worked for me;

useEffect(() => {
  smoothscroll.polyfill();
}, []);

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    scroll-snap-type: unset;
  }
}

[lehni]

Here a polyfill for scrollIntoView that fixes this for scroll-parents with scroll-snap-type set:

const { elementScrollIntoView } = await import('seamless-scroll-polyfill')
Element.prototype.scrollIntoView = function (options) {
  const duration = options?.behavior === 'smooth' ? 250 : undefined
  if (duration) {
    // The scroll-snap-type will interfer with polyfill smooth-scrolling,
    // so disable it on the scroll parent for the duration of the scroll.
    const { style } = this.parentElement
    style.setProperty('scroll-snap-type', 'none', 'important')
    setTimeout(() => {
      style.removeProperty('scroll-snap-type')
    }, duration)
  }
  elementScrollIntoView(this, options, { duration })
}