Eliminate Layout Shift Due To Scrollbar - Part 2

I wrote about using scrollbar-gutter to eliminate layout shift when browsing across pages that may or may not need a vertical scrollbar. I was, however, avoiding using it because Safari doesn't support it yet. Well, that's not necessary anymore because today I learned about @supports in CSS. Here's a piece of code that should probably be part of all popular CSS reset/normalize projects.

my earlier post about layout shift due to scrollbar

Safari and @supports

html {
  overflow-y: scroll;
}

@supports (scrollbar-gutter: stable both-edges) {
  html {
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
  }
}

If you don't care about symmetry, you can remove "both-edges".

---

Created: 2022-06-11

MicroGemlog

Home

-- Response ended

-- Page fetched on Mon May 20 19:09:41 2024