Closed alibosworth closed 3 years ago
jonaskuske
commented
3 years ago Just tested it myself and can't reproduce – demo works fine for me in Safari 14.0.3, macOS 11.2.3, with both CSS variables and font-family. Could you verify that you don't have any extensions installed that may mess with the page? :)
alibosworth
commented
3 years ago OK wow, perhaps somewhat embarrassing but: the issue seems to be related to the fact that i had "Reduce Motion" checked off in Accessibility > Display ! hm not sure what to think, on one hand I guess I asked for it, but on another hand it is unexpected and it isn't intuitive to me why the inline style attribute makes the polyfill work. Any thoughts?
alibosworth
commented
3 years ago I searched the repo for prefers-reduced-motion and found the note about it, so it seems like maybe it is a demo-only problem, and that explains how the inline style overrides the reversion to auto
jonaskuske
commented
3 years ago Yep, that's it — the .smooth-scroll class that the demo is using is wrapped in a media query so that it respects reduced-motion (so nothing happens if that setting is on), but inline styles will overwrite that.
I've added a hint to the documentation site that shows up if prefers-reduced-motion is active so now it should be clear what's happening :)
According to https://caniuse.com/?search=smooth-scroll, scroll-behaviour is still not supported on Safari.
When i view the demo at https://jonaskuske.github.io/smoothscroll-anchor-polyfill/ it doesn't work in Safari 14.0.3 (on macOS 11.2.3 (20D91)), however if I add
style="scroll-behavior: smooth"to the HTML tag in inspector on the hosted demo, it works. I'm not really sure why this is the case, because obviously Safari has supported CSS variables for a while.