CSS viewport units are wrongly recalculated if scrollbar-gutter enabled
Categories
(Core :: Layout: Scrolling and Overflow, defect, P3)
Tracking
()
People
(Reporter: maciej.zagrabski, Unassigned)
References
Details
Attachments
(2 files)
firefox.png
Steps to reproduce:
<html>
<head>
<style>
html {
scrollbar-gutter: stable both-edges;
}
body {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
}
.wrapper {
width: 100%;
margin-top: 10px;
}
.a {
width: 100%;
height: 50px;
background-color: orange;
}
.b {
width: 100px;
height: 50px;
position: fixed;
margin-top: 70px;
background-color: red;
right: calc(50vw - 400px);
}
.b:hover {
width: 150px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="a"/>
<div class="b"/>
</div>
</body>
</html>
Actual results:
When scrollbar-gutter is used, viewport related units like vw are calculated wrongly. I prepared short demo of this issue.
In Firefox 136 on linux, above html is rendered properly, both rectangles have aligned right edge.
In Firefox 136 on mac, html is rendered wrongly, rectangles are misaligned. What is weird, lines drawn by "inspect" tool shows proper outline.
I am attaching two screen shots in one file, top is linux, bottom in mac.
Expected results:
Above code should render two rectangles with aligned right edge.
|
||
Comment 1•1 month ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 2•19 days ago
|
||
The severity field is not set for this bug.
:hiro, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Comment 3•19 days ago
|
||
|
|
||
Comment 4•19 days ago
|
||
I did mozregression with --pref "widget.gtk.overlay-scrollbars.enabled:false". The range is https://hg-edge.mozilla.org/mozilla-central/pushloghtml?fromchange=66b5b425d27f9880ebde030e4c0a5e433da569ee&tochange=646bd6a3104d8a94a342f6de273f829cecf1de50 .
Looks like it's been broken since we implemented scrollbar-gutter in bug 1715112. CCing Ting-Yu.
Maciej, thanks for reporting this bug. I wonder whether you found this issue on a real site, or you just found it while you were playing around with scrollbar-gutter styles? If the answer is the former, would you mind sharing the link to the site? Thanks!
|
|
||
Comment 5•1 day ago
|
||
Redirect a needinfo that is pending on an inactive user to the triage owner.
:hiro, since the bug has recent activity, could you please find another way to get the information or close the bug as INCOMPLETE if it is not actionable?
For more information, please visit BugBot documentation.
|
Reporter | |
Comment 6•1 day ago
|
||
I was trying to get scrollbar-gutter to work with position: fixed in chrome (my first attempt worked well in firefox, and chrome mobile, but was misaligned in chrome desktop), i checked several chrome versions, and it was working differently, but all wrong.
I was trying to provide minimal example and fill bug for chrome: https://issues.chromium.org/issues/405676711
And then I found scenario where it does not work in firefox as well : P So I filled the bug.
In the end I gave up using viewport units, for this scenario at least.
|
|
||
Comment 7•29 minutes ago
|
||
Thanks!. Then I am going to set P3:S3 for now.
Description
•