Oh, Safari, you're right!
I think you convinced me, I'll go with --scroll-behavior as default and only offer the font-family detection as option to support legacy browsers like IE 🤞🏻
...and I don't think running getComputedStyle(el).fontFamily when an anchor with a local href is clicked is so bad for performance that it justifies dropping IE support, do you? Or do you mean the performance impact of polyfilling smooth scroll in general?
I haven’t tested it but the scroll behavior itself might be too much.
getComputedStyle returns a live object so you’ll only have to request it once, but even if you requested it multiple times I don’t think it would be problematic.
I'm using it on the documentation site and it works smoothly, even on IE9 with requestAnimationFrame substituted as setTimeout(fn, 0) 😅
Also used it just fine on a production site that's very heavy on smooth scrolling (while at the same time running a position: sticky polyfill runtime), so I'm not too concerned about performance. :)
And didn't know getComputedStyle returns a live binding, thanks for the info! Will take this into account next time I update the package 👍🏻
So, current strategy:
Have custom property --scroll-behavior as default/recommended way of adjusting the behavior
Keep supporting fontFamily and inline styles for legacy support/convenience
Do you think it's worth it having the custom property that's used be configurable, so users can use some other property instead of --scroll-behavior if they want?
To go with these changes, the PostCSS Plugin shall compile scroll-behavior: smooth to:
scroll-behavior:smooth;--scroll-behavior:smooth;
and if browserslist includes browsers without support for custom properties, compile to:
scroll-behavior:smooth;--scroll-behavior:smooth;font-family:'scroll-behavior: smooth',/* user defined fonts */;
(while accepting { customProperty: boolean, fontFamily: boolean } config so users can overwrite this behavior)
Do you have any feedback on this?
(sorry to bother you but your input was very valuable so far 🙂)
Looks good to me! Love the very structured approach. 👏
Careful with wanting to support everything. Could increase library size, might introduce weird bugs (certainly on very old browsers) sometimes a simple mustard cut is a lot better for everyone.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Don’t forget about Safari ;-)
Might be a good idea to just not have it on IE11 as the performance impact might not be worth it.
Oh, Safari, you're right!
I think you convinced me, I'll go with
--scroll-behavior
as default and only offer thefont-family
detection as option to support legacy browsers like IE 🤞🏻...and I don't think running
getComputedStyle(el).fontFamily
when an anchor with a local href is clicked is so bad for performance that it justifies dropping IE support, do you? Or do you mean the performance impact of polyfilling smooth scroll in general?Awesome.
I haven’t tested it but the scroll behavior itself might be too much.
getComputedStyle returns a live object so you’ll only have to request it once, but even if you requested it multiple times I don’t think it would be problematic.
I'm using it on the documentation site and it works smoothly, even on IE9 with
requestAnimationFrame
substituted assetTimeout(fn, 0)
😅Also used it just fine on a production site that's very heavy on smooth scrolling (while at the same time running a
position: sticky
polyfill runtime), so I'm not too concerned about performance. :)And didn't know
getComputedStyle
returns a live binding, thanks for the info! Will take this into account next time I update the package 👍🏻So, current strategy:
--scroll-behavior
as default/recommended way of adjusting the behaviorfontFamily
and inline styles for legacy support/convenience--scroll-behavior
if they want?To go with these changes, the PostCSS Plugin shall compile
scroll-behavior: smooth
to:and if
browserslist
includes browsers without support for custom properties, compile to:(while accepting
{ customProperty: boolean, fontFamily: boolean }
config so users can overwrite this behavior)Do you have any feedback on this?
(sorry to bother you but your input was very valuable so far 🙂)
Looks good to me! Love the very structured approach. 👏