1918733 - `range.getBoundingClientRect()` has 0 width/height for `content-visibility: hidden`

Status: RESOLVED FIXED

(Core :: Layout, defect, P3)

Description

[Nolan Lawson]

Attachment: index.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Steps to reproduce:

1. Open the attached index.html file
2. The reported width/height should be non-zero, but in Firefox they are both zero.

Minimal repro:

<div style="content-visibility: hidden; contain-intrinsic-size: 100px 100px;">
    <span id="span">Hello</span>
</div>
<script>
    const range = document.createRange()
    range.selectNode(span.firstChild)
    console.log(range.getBoundingClientRect().width) // 0
</script>

Actual results:

The width/height of the reported bounding rect are both 0.

Expected results:

Per the CSS containment spec 1, layout should be forced on content-visibility: hidden elements if their size is requested by script, e.g. using getBoundingClientRect(). This works correctly in Firefox when calling getBoundingClientRect() on an element, but not on a Range that selects a text node (as in this repro).

Browsers that fail the test:

• Firefox Nightly 132.0a1 (2024-09-09) (64-bit)

Browsers that pass the test:

• Chromium 128.0.6613.119
• Safari Technology Preview 202 (Safari 18.0 WebKit 19620.1.4.8)

Comment 1

[Nolan Lawson]

Attachment: firefox-repro.png

Comment 2

[Nolan Lawson]

Attachment: chromium-repro.png

Comment 3

[Nolan Lawson]

Attachment: safari-repro.png

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

A trivial fix could be something like changing this by aStartContainer->GetPrimaryFrame(FlushType::Layout);... That should cover most cases, though I suspect dealing with cases where the range spans different boundaries would be fun.

We should probably at least do that tho.

Comment 6

[tannal2409]

aStartContainer doesn't have a method called GetPrimaryFrame.

Comment 7

[Sick Leviathan]

Attachment: Bug 1918733 - Implement recommended fix for zero width/height on `range.getBoundingClientRect()`. r?emilio

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/37db33174d7b
https://hg.mozilla.org/integration/autoland/rev/74f5c94d0433
Implement recommended fix for zero width/height on `range.getBoundingClientRect()`. r=emilio

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/56346 for changes under testing/web-platform/tests

Comment 10

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/74f5c94d0433

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot