Eliminate Layout Shift Due To Scrollbar

I've noticed this issue before on many websites, including GitHub. If you have a web page open with a scrollbar and go to another web page on the same website without a scrollbar, layout shift happens. I think we can safely agree that layout shift is annoying as fuck and should never happen. The popular solution to this fix this problem seems to be

html {
  overflow-y: scroll;
}

This will always show a scrollbar, even if it isn't required. There are some hacks with viewport units as well. However, the "proper" solution to this issue is

html {
  scrollbar-gutter: stable both-edges;
}

hacks with viewport units

Unsurprisingly, as of 2022-04-28, Safari doesn't support this. Oh well,

¯\_(ツ)_/¯ .

---

Created: 2022-04-28

MicroGemlog

Home

-- Response ended

-- Page fetched on Mon May 20 21:16:19 2024