Fix x-trap.noscroll layout shift conflict with scrollbar-gutter

[dotfrag]

If scrollbar-gutter is set to something other than the initial value 'auto' (e.g. 'stable'), do not modify padding-right. See issue #4511.

This is my attempt to fix it, hoping it's heading to the right direction. I'm using it in my app and it's working. Feel free to discard/modify as you like.

EDIT: Does not appear to work reliably in all cases. I'm trying to understand why, otherwise I'll close it. Fixed, checking the failed test now.

---

Tested and seems to be working:

scrollbar-gutter undefined => overflow: hidden; padding-right: 15px;

scrollbar-gutter unchanged (defaults to 'auto') => overflow: hidden; padding-right: 15px;

scrollbar-gutter: stable => overflow: hidden;

scrollbar-gutter: stable both-edges => overflow: hidden;

---

Ready for review.

Caveat: scrollbar-gutter, like many other CSS properties supports the global values inherit/revent/etc... which I'm not accounting for. I believe these are really edge-cases. If you want to check for those, then the if check must be explicit (i.e. check for 'stable' and 'stable both-edges') and the return statements reversed.

[ekwoka]

Initial and unset shouldn't impact "get computed style" since that will find what the actual applied value is, not what an elements literal setting is.

[dotfrag]

Ah yes that's true!

[bytespider]

I would really like this to be merged. I'm using scrollbar-gutter: stable which causes a 15px layout-shift, which is quite frustrating

[dotfrag]

I would really like this to be merged. I'm using scrollbar-gutter: stable which causes a 15px layout-shift, which is quite frustrating

As a temporary workaround you can use the patch tool, i.e. pnpm patch.

[bytespider]

As a temporary workaround you can use the patch tool, i.e. pnpm patch.

Thanks, I didn't know this was possible, I've been forking all this time!

[dangelion]

Why this fix was not already merged?

As a temporary workaround I'm doing this:

html { 
  scrollbar-gutter: stable;
  padding-right: 0 !important:
}