1835179 - Container query units incorrectly cached based on their values, not on their containers

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Roman Komarov]

Attachment: CodePen - Firefox bug with container query units.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0

Steps to reproduce:

Add several containers with different sizes, with elements inside having the same dimensions set with container query length units.

CodePen to reproduce: https://codepen.io/kizu/pen/mdzoGeP (also attaching the saved html page to this report)

Example code:

<div style="width: 100px; height: 50px; container-type: size; border: 1px solid;">
  <div style="background: pink; width: 100cqi; height: 100cqb"></div>
</div>

<div style="width: 200px; height: 75px; container-type: size; border: 1px solid;">
  <div style="background: pink; width: 100cqi; height: 100cqb"></div>
</div>

Actual results:

When the same values for the container query length units are used for elements in different containers, it seems that they share the cache based on the units, but not based on containers, making it so elements that should have different dimensions get the same dimensions.

Expected results:

Elements with the same dimensions expressed in container query length units should have different dimensions when placed into different containers.

Comment 1

[Roman Komarov]

Attachment: Screenshot of the attached page in Chrome on the left, and in Firefox on the right

Attaching the screenshot showing the result in Chrome on the left (expected) and in Firefox on the right (buggy).

Comment 2

[Roman Komarov]

As an additional note: found a workaround for this issue by adding an animation that runs once for the element with the container query units — changes to the element seem to “fix” the issue, so maybe this “caching” is only done the first time the elements are rendered?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1835179 - Container units should prevent us from sharing style by rule node. r=dshin,#layout,#style

At least when the containers are different.

For now check that by doing a somewhat simplified test (checking
sibling-ness).

The new flag can be useful to optimize container query restyles on
resizes too, in the future.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

So the minimal test-case it's already fixed on Nightly, that's bug 1832481. But there seems to be an extra issue, due to style reuse from the style sharing cache. Fixing is straight-forward.

Comment 5

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

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

For more information, please visit BugBot documentation.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ea7bbf2bed81
Container units should prevent us from sharing style by rule node. r=dshin

Comment 7

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

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

Comment 8

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/ea7bbf2bed81

Comment 9

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

Upstream PR merged by moz-wptsync-bot