Fix x-trap.noscroll layout shift conflict with scrollbar-gutter #4512
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.