Width of screen is not calculating correctly when using scrollbar-gutter stable

Issue

Note: scrollbar-gutter: stable; is not supported in Safari. Futhermore, the issue is only happening in Chrome, but works as expected in Firebox.

When trying to position elements fixed to the viewport when using scrollbar-gutter: stable, I am noticing some weird behavior.

When there is a scrollbar, or a stable scrollbar gutter, the full screen width is supposed to account for the scrollbar/gutter and subtract its width. This way, position right: 0; does not end up behind the scrollbar, but rather where it starts.

However, as you can see in my snippet, the width is instead ignoring the gutter and giving the full width as if the gutter wasn't even there. This causes my red div to not be centered correctly and my yellow div to end up behind the scrollbar (even blocking some of the text).

When you click on the screen in my snippet, the width of the div is being logged to the screen. You can see that it initially shows the correct width where it takes the gutter into account. However, for no explainable reason what so ever, on the second click, the width has changed all of a sudden and you get the incorrect width. Why is this happening and how can I fix this?

const test = document.querySelector(".container");

document.addEventListener("click", () => console.log(test.clientWidth))

html {
  scrollbar-gutter: stable;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: skyblue;
}
.test1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rem;
  height: 10rem;
  background: salmon;
}
.test2 {
  position: fixed;
  right: 0;
  top: 0;
  height: 50%;
  width: 4.5rem;
  background: yellow;
}

<div class="container">
  <div class="test1"></div>
  <div class="test2">Some text example</div>
</div>

Solution

There is already a bug reported in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1251856 ("Issue 1251856: Elements with position: fixed should respect scrollbar-gutter: stable" from September 2021, still open as of January 2024).

Depending on the use case there may be ways to work around this. width: 100vw; seems to always be the same. So position: fixed; left: 50vw; does at least not jump. And left: 100%; transform: translateX(-100%); does attach an element on the left side of the stable gutter/the scrollbar. (But don't try to dynamically apply overflow: hidden to html, this triggers the bug again.

I haven't checked JavaScript yet, but one may be able to read positions from a (hidden) element to get the value one needs.

Answered By - Steffen Wenzel