Open madeleineostoja opened 2 years ago
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'
});
This was a situation I hadn't thought of and Safari surprised me. Which version of Safari is it?
Just test it with Safari on iOS 15.6.
And the elem.scrollIntoView({ behavior: 'smooth' })
is native supported.
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
@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 https://github.com/iamdustan/smoothscroll/issues/177#issuecomment-1121468461
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
Safari now supports
scroll-behavior: smooth
in CSS, but notelem.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