Open
Bug 1918022
Opened 3 months ago
Updated 2 months ago
chromeos.dev - Broken page layout
Categories
(Web Compatibility :: Site Reports, defect, P3)
Tracking
(Not tracked)
NEW
People
(Reporter: ctanase, Unassigned)
References
(Depends on 1 open bug, )
Details
(Keywords: webcompat:platform-bug, webcompat:site-report, Whiteboard: [webcompat-source:web-bugs])
User Story
platform:windows,mac,linux,android impact:significant-visual configuration:general affects:all branch:release diagnosis-team:layout
Attachments
(1 file)
|
317.48 KB,
image/png
|
Details |
image.png
Environment:
Operating system: Linux / Windows 10
Firefox version: Firefox 115.0/130/132
Steps to reproduce:
- Go to https://chromeos.dev/en/add-to-chromebook-badge
- 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
|
Reporter | |
Comment 1•3 months ago
|
||
|
||
Updated•2 months ago
|
|
||
Comment 2•2 months ago
|
||
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.
Depends on: 1795622
Keywords: webcompat:needs-diagnosis → webcompat:platform-bug
You need to log in
before you can comment on or make changes to this bug.
Description
•