isScrollBehaviorSupported returns false positive in Safari, causing polyfill to fail

[madeleineostoja]

Safari now supports scroll-behavior: smooth in CSS, but not elem.scrollIntoView({ behavior: 'smooth' }), causing this polfyfill to incorrectly not be applied.

I'm not sure of a feature check you could do, other than just adding a navigator check for Safari specifically in addition to the current CSS prop check. Feels hacky, but right now the polyfill is broken out of the box for the majority use-case

[madeleineostoja]

FWIW I'm using detect-browser as a workaround for now, might be worth documenting if nothing else:

import { detect } from 'detect-browser';
import { elementScrollIntoViewPolyfill } from 'seamless-scroll-polyfill';

const browser = detect();
elementScrollIntoViewPolyfill({
  forcePolyfill: browser?.name === 'safari' || browser?.name === 'ios'
});

[magic-akari]

This was a situation I hadn't thought of and Safari surprised me.
Which version of Safari is it?

[madeleineostoja]

^15.4 https://caniuse.com/?search=scroll-behavior

[magic-akari]

Just test it with Safari on iOS 15.6.
And the elem.scrollIntoView({ behavior: 'smooth' }) is native supported.

[madeleineostoja]

Huh I guess caniuse is out of date. I can confirm that the latest version of desktop safari is definitely an issue though. And I would assume that anything prior to iOS 15.6 is still an issue, which is still the majority in usage

[midanirachdi]

@magic-akari @madeleineostoja
the fix in this case would be to add overflow: auto to the container and hide the scrollbar (in case you don't want a scrollbar) like so ::-webkit-scrollbar { display: none; } as stated here iamdustan#177 (comment)

[madeleineostoja]

Weird!

Can confirm that explicitly setting the overflow to scroll or auto (amounts to same thing if there's overflow) fixes this in safari. For my use-case I'm using JS to 'scroll' elements in a container I don't want users to scroll, so I just hijacked the wheel event to achieve that behaviour.

This gotcha should probably be documented and then the issue can be closed out