Please take note: The
scrollbar-gutter: stable;property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox.
I have observed some unusual behavior when attempting to position elements fixed to the viewport with the use of scrollbar-gutter: stable.
Normally, when there is a scrollbar or a stable scrollbar gutter, the full screen width should adjust to accommodate the scrollbar/gutter by subtracting its width. This ensures that setting right: 0; does not place the element behind the scrollbar but rather aligns it correctly.
However, in the code snippet provided below, the width calculation appears to disregard the gutter, resulting in the red div being misaligned and the yellow div appearing behind the scrollbar, partially obscuring the text.
The snippet includes a feature where clicking on the screen logs the width of the div. Initially, the correct width considering the gutter is displayed. Strangely, upon a second click, the width inexplicably changes to an incorrect value. What could be causing this issue and how can it be rectified?
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>