3 ms·

Something for the sanding list: Navigating between https://blog.jim-nielsen.com/about/ https://blog.jim-nielsen.com/about/ and https://blog.jim-nielsen.com http

by dewey 2y ago

Something for the sanding list: Navigating between https://blog.jim-nielsen.com/about/ https://blog.jim-nielsen.com/about/ and https://blog.jim-nielsen.com https://blog.jim-nielsen.com makes the layout shift a bit in Safari on macOS. The reason is that Safari only shows the scrollbar when it's needed but without "reserving" the space. I once spent hours debugging this before I realized what was happening, my confusion coming from the fact that with the inspector open that wasn't the case (As there the scrollbar was always visible...).

promiseofbeans 2y ago
There's a newish CSS feature to fix just this: scrollbar-gutter (https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...). Unfortunately, Safari doesn't support it. Can also lead to an ugly gap in your navbar depending on which container you're making scroll.
- dewey 2y ago
  That sounds promising, for some reason the webkit issue says “resolved / fixed” but I don’t see any updates in the issue itself: https://bugs.webkit.org/show_bug.cgi?id=167335 https://bugs.webkit.org/show_bug.cgi?id=167335
  - extra88 2y ago
    Not everything committed to WebKit ships in Safari. But the status changed to resolved/fixed only a month ago and it's in the latest Safari Technology Preview so maybe scrollbar-gutter will ship this year. https://www.webkit.org/blog/15860/release-notes-for-safari-technology-preview-203/ https://www.webkit.org/blog/15860/release-notes-for-safari-t...
madeofpalk 2y ago
> The reason is that Safari only shows the scrollbar when it's needed but without "reserving" the space. Every browser with non-floating scrollbars will do this, right? Safari, in its default configuration on a touch-ish device (macbook without a scrollwheel mouse, iOS) don't show explicit scroll bar gutters IIRC, and so won't have this problem.

by dewey 2y ago

promiseofbeans 2y ago

There's a newish CSS feature to fix just this: scrollbar-gutter (https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...). Unfortunately, Safari doesn't support it. Can also lead to an ugly gap in your navbar depending on which container you're making scroll.

dewey 2y ago
That sounds promising, for some reason the webkit issue says “resolved / fixed” but I don’t see any updates in the issue itself: https://bugs.webkit.org/show_bug.cgi?id=167335 https://bugs.webkit.org/show_bug.cgi?id=167335
- extra88 2y ago
  Not everything committed to WebKit ships in Safari. But the status changed to resolved/fixed only a month ago and it's in the latest Safari Technology Preview so maybe scrollbar-gutter will ship this year. https://www.webkit.org/blog/15860/release-notes-for-safari-technology-preview-203/ https://www.webkit.org/blog/15860/release-notes-for-safari-t...

madeofpalk 2y ago

> The reason is that Safari only shows the scrollbar when it's needed but without "reserving" the space. Every browser with non-floating scrollbars will do this, right? Safari, in its default configuration on a touch-ish device (macbook without a scrollwheel mouse, iOS) don't show explicit scroll bar gutters IIRC, and so won't have this problem.