ResizeObserver behavior inconsistent with other browsers for scrollbars
Categories
(Core :: Layout, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox99 | --- | fixed |
People
(Reporter: johan, Assigned: emilio)
References
Details
Attachments
(5 files)
Alert on Canary
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36
Steps to reproduce:
We use ResizeObserver to detect when scrollbars appear/disappear to sync appearance with other parts of our UI. The approach works in Chrome & Safari but not in Firefox. Seem FF does not subtract scrollbar dimensions from the contentRect but the others do.
This html shows the issue:
<html lang="">
<head>
<style>
#outer {
position : relative;
width : 100px;
height : 200px;
overflow : auto;
background : #818182;
}
#inner {
position : absolute;
top : 0;
left : 0;
width : 10px;
height : 10px;
background : #0a6fc0;
}
</style>
<title>ResizeObserver bug?</title>
</head>
<body>
<div id="outer">
<div id="inner"></div>
<script>
async function animationFrame() {
return new Promise(resolve => requestAnimationFrame(() => resolve()));
}
async function test() {
let count = 0;
const
outer = document.getElementById('outer'),
inner = document.getElementById('inner'),
observer = new ResizeObserver(entries => {
count++;
});
observer.observe(outer);
inner.style.top = '1000px';
await animationFrame();
await animationFrame();
inner.style.top = 0;
await animationFrame();
await animationFrame();
if (count === 2) alert('success');
}
test();
</script>
</div>
</body>
</html>
Actual results:
Nothing happened
Expected results:
Moving the inner div makes outer element overflow, ResizeObserver should have picked that up and been hit twice and the alert should show
|
||
Comment 2•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
|
||
Comment 3•3 years ago
|
||
The severity field is not set for this bug.
:boris, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Comment 4•3 years ago
|
||
I copy-paste the test from the comment 0. However, I didn't see any alert or log on Chrome and Safari.
|
|
||
Comment 5•3 years ago
|
||
I cannot see the expected behavior on a newer Chrome Version 97.0.4668.0 (Official Build) canary (x86_64). Would you mind checking this test again? Thanks.
Firefox may have this bug anyway I guess, so I put the meta bug in the reference, so I will not miss this one.
It works on Canary Version 97.0.4668.2 (Official Build) canary (x86_64) here, on Mac (with scrollbars on).
And on Safari Version 15.0 (16612.1.29.41.4, 16612)
|
||
Comment 9•3 years ago
|
||
Alert shows for me on the latest Chrome. It's on OSX.
|
|
||
Comment 10•3 years ago
|
||
Thanks for the confirmation. :)
|
|
||
Comment 11•3 years ago
|
||
In support of how the other browsers work, I reference this: https://drafts.csswg.org/css-overflow/#scrollbar-layout
"When the box is intrinsically sized, this reserved space is added to the size of its contents. It is otherwise subtracted from space alotted[sic] to the content area."
So if an element is sized by CSS layout (As opposed to "shrinkwrapping" its content - what they call intrinsically sized), then when a scrollbar appears, the content box shrinks, and so the ResizeObserver must announce this.
|
|
||
Comment 12•3 years ago
|
||
Any news on this? It's really a necessity to monitor the appearance and disappearance of scrollbars.
|
||
Comment 13•3 years ago
|
||
We are facing the same issue in react-data-grid that relies on the contentBox size
|
Assignee | |
Comment 14•3 years ago
|
||
I don't really feel our behavior is particularly less correct than
Chromium since in our implementation an scrolling element has two boxes
rather than one, but in the interest of interop, and given developers
find it useful, it seems worth doing this.
|
||
Updated•3 years ago
|
|
||
Comment 15•3 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/623c4391875a Use scrollport size rather than content-box size of scrollframes. r=boris
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/32960 for changes under testing/web-platform/tests
|
||
Comment 17•3 years ago
|
||
Backed out for causing wpt failures at scrollbars.html.
Backout link: https://hg.mozilla.org/integration/autoland/rev/6c518d44462970c9813b97ef7afd517f3bcdcb51
Failure log: https://treeherder.mozilla.org/logviewer?job_id=369036389&repo=autoland&lineNumber=8752
Upstream PR was closed without merging
|
|
Assignee | |
Comment 19•3 years ago
|
||
Android is expected to fail given it has overlay scrollbars.
|
|
||
Comment 20•3 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/9784a06a9b54 Use scrollport size rather than content-box size of scrollframes. r=boris
|
|
||
Comment 21•3 years ago
|
||
Backed out for causing Android wpt failures at scrollbars.html.
Backout link: https://hg.mozilla.org/integration/autoland/rev/ddd175a86d1c1f264b050733a2e45a84bbe8fc74
Push where failures started: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=XxMNG79ZTQGeMlFq8x64qg.0&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=a5d4d5683825a62dc0bec7751dec7b35cd82741f
Failure log: https://treeherder.mozilla.org/logviewer?job_id=369079702&repo=autoland&lineNumber=8766
Upstream PR was closed without merging
|
|
||
Comment 24•3 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/00f13d0661f4 Use scrollport size rather than content-box size of scrollframes. r=boris
|
||
Comment 25•3 years ago
|
||
| bugherder | ||
Upstream PR merged by moz-wptsync-bot
|
Reporter | |
Comment 27•2 years ago
|
||
Happy to hear it was fixed, thanks!
Description
•