Ширина экрана неправильно рассчитывается при использовании стабильной прокрутки ⇐ Html

[Anonymous]

Примечание: Scrollbar-gutter: stable; < /code> не поддерживается в Safari. Futhermore, проблема происходит только в Chrome, но работает, как и ожидалось, в Firebox. Предполагается, что ширина учитывает прокрутку/желоб и вычесть его ширину. Таким образом, позиция справа: 0; не заканчивается за прокручиванием, а скорее там, где она начинается. Это приводит к тому, что мой красный дивинг не будет правильно центрироваться, а мой желтый див оказался за прокруткой (даже блокируя часть текста). < /P>
Когда вы нажимаете на экран в моем фрагменте, ширина Div регистрируется на экране. Вы можете видеть, что это изначально показывает правильную ширину, где он учитывает водосточный желоб. Однако, без объяснения объяснения причины, что когда -либо, во втором щелчке, ширина внезапно изменилась, и вы получаете неверную ширину. Почему это происходит и как я могу это исправить?

Код: Выделить всё

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

document.addEventListener("click", () => console.log(test.clientWidth))< /code>
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;
}< /code>


Some text example

Подробнее здесь: https://stackoverflow.com/questions/777 ... ter-stable