Closed Bug 1733042 Opened 3 years ago Closed 2 years ago

ResizeObserver behavior inconsistent with other browsers for scrollbars

Categories

(Core :: Layout, defect)

Firefox 92
defect

Tracking

()

RESOLVED FIXED
99 Branch
Tracking Status
firefox99 --- fixed

People

(Reporter: johan, Assigned: emilio)

References

Details

Attachments

(5 files)

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

Tried it on nightly with same outcome

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.

Component: Untriaged → Layout
Product: Firefox → Core

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(boris.chiou)
Attached file test

I copy-paste the test from the comment 0. However, I didn't see any alert or log on Chrome and Safari.

Flags: needinfo?(boris.chiou)
Blocks: 1732237
Severity: -- → S3

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.

Flags: needinfo?(johan)

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)

Flags: needinfo?(johan)
Attached image Alert on Canary
Attached image Alert on Safari
Attached image AlertOnChrome.png

Alert shows for me on the latest Chrome. It's on OSX.

Thanks for the confirmation. :)

Status: UNCONFIRMED → NEW
Ever confirmed: true

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.

Any news on this? It's really a necessity to monitor the appearance and disappearance of scrollbars.

We are facing the same issue in react-data-grid that relies on the contentBox size

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.

Assignee: nobody → emilio
Status: NEW → ASSIGNED
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
Upstream PR was closed without merging

Android is expected to fail given it has overlay scrollbars.

Flags: needinfo?(emilio)
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
Upstream PR was closed without merging

Grr, third time's the charm.

Flags: needinfo?(emilio)
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
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 99 Branch
Upstream PR merged by moz-wptsync-bot
Regressions: 1757443

Happy to hear it was fixed, thanks!

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: