1918022 - chromeos.dev - Broken page layout

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Calin Tanase]

Environment:
Operating system: Linux / Windows 10
Firefox version: Firefox 115.0/130/132

Steps to reproduce:

1. Go to https://chromeos.dev/en/add-to-chromebook-badge
2. Observe the page.

Expected Behavior:
The page is rendered correctly.

Actual Behavior:
The page layout is broken.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, and Firefox Release
• Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/141459

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[Daniel Holbert [:dholbert]]

This seems to be a dependency on a style container-query, specifically this:

@container style(--inline-aside: 1) {
    .guidelines--section[data-astro-cid-twgynu74] {
        grid-column: 3 / span 3;
    }
}

https://chromeos.dev/_astro/add-to-chromebook-badge.C2FZ22qf.css

Firefox doesn't recognize that style. If I untick that style in Chrome, they change to match our broken rendering. And if I remove the container-query in Firefox and just directly add that style to the .guidelines--section elements' inline styles, Firefox changes to match Chrome's good rendering.

Comment 3

[Daniel Holbert [:dholbert]]

We probably won't be fixing bug 1795622 right away, so in the meantime it'd be nice to get this addressed on the website's side so that it doesn't fail quite so catastrophically in browsers that lack @container style support.

Adding needs-contact to see if we can get Google to update their CSS here so that it fails a bit more gracefully in browsers that fail to parse that @container style rule that I quoted in comment 2.

Comment 4

[Jonathan Kew [:jfkthame]]

This is working in Nightly now, as we've enabled @container style queries and enough of the functionality is implemented to support this.

Do we still want to follow up on comment 3, for browsers (incl. Firefox release versions, for now) that don't yet implement style() queries?

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Jonathan Kew [:jfkthame] from comment #4)

This is working in Nightly now, as we've enabled @container style queries and enough of the functionality is implemented to support this.

Hooray! (Looks like it's guarded to be Nightly-only for now, so let's keep this site-report bug open until it's riding the trains.)

Do we still want to follow up on comment 3, for browsers (incl. Firefox release versions, for now) that don't yet implement style() queries?

Probably not worth spending resources pushing for a site fix at this point, given that we'll have this fixed in the not-too-distant future (and I expect the https://chromeos.dev/ audience -- i.e. folks viewing Chrome OS developer documentation -- is more likely than the broader web to be on a modern browser [particularly Chrome].)

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #5)

(In reply to Jonathan Kew [:jfkthame] from comment #4)

This is working in Nightly now, as we've enabled @container style queries and enough of the functionality is implemented to support this.

Hooray! (Looks like it's guarded to be Nightly-only for now, so let's keep this site-report bug open until it's riding the trains.)

Update: style container queries were enabled by default for all release channels in bug 2030645.

I also confirmed that I get Expected behavior in default-configured Firefox 151.0.4 as well as Nightly 153.0a1 2026-06-15, and I can bring back the broken behavior by turning the pref off (setting layout.css.style-queries.enabled to false)

So: we can consider this FIXED, and let's change the platform-bug to bug 2030645 since that's the proximal thing that fixed this.

Comment 7

[Bernadett Farkas]

Verified, the issue no longer reproduces.

Tested with:

• Browser / Version: Firefox 153.0-candidate build 1
• Operating System: Windows 10