Closed
Bug 1429654
Opened 7 years ago
Closed 4 years ago
Firefox differs from Chrome/Edge on quirks-mode percent height resolution, on child of auto-sized flex-item & flex-container
Categories
(Core :: Layout: Flexbox, defect, P3)
Tracking
()
RESOLVED
INVALID
People
(Reporter: dholbert, Unassigned)
References
()
Details
Attachments
(3 files)
screenshot of testcase 1 in Chrome dev vs. Edge vs. Firefox Nightly
STR:
1. Load attached testcase (which lacks a doctype & hence is in quirks mode)
2. Look at how tall the gray div and pink divs are.
EXPECTED RESULTS:
Interop with other browsers.
ACTUAL RESULTS:
- Firefox: Gray div is as tall as the text, pink div is 50% of that height.
- Chrome: Gray div and pink div are both 50% of the height of the blue div (the flex container).
I'm not sure whether Chrome's behavior is rational, but I'm just filing this for now to track the fact that we differ...
|
Reporter | |
Comment 1•7 years ago
|
||
Edge does its own different thing:
- Edge: each div is 50% of the height of its parent. (pink is 1/2 height of gray which is 1/2 height of blue)
|
|
Reporter | |
Comment 2•7 years ago
|
||
For comparison, here's the same testcase, now with a doctype to make it render in standards mode.
|
|
Reporter | |
Comment 3•7 years ago
|
||
(on the standards-mode version, "testcase 2", we *almost* have interop -- Edge & Firefox agree [and exactly match Firefox's rendering of testcase 1], and Chrome nearly agrees, and to the extent that they disagree, I'm pretty sure it's their bug & they know about it.)
Anyway -- this bug report here is focusing on testcase 1, the quirks-mode one, and "testcase 2" is just for comparison.
|
|
Reporter | |
Comment 4•7 years ago
|
||
|
|
Reporter | |
Comment 5•7 years ago
|
||
Incidentally, I'm pretty sure this bug is precisely what's causing our interop problem at https://app.purple.pm/login (which birtles just brought up on IRC). That page renders with shrinkwrappy short content in Firefox vs. full-height-of-viewport in Chrome.
The HTML does not include a doctype (so it's in quirks mode), and its DOM looks roughly like:
<ng-component>
<div id="homepage">
<div id="login-options">
The outer ng-component and #homepage have "height:auto" (unspecified, really). #homepage is a flex container. And #login-options has "height:100%". In Chrome, this all makes this whole subtree grow to the size of the viewport -- but if I change the page to be in standards mode (by saving it to disk and then adding <!DOCTYPE html>), then they agree with our rendering and render it shorter & shrinkwrappy.
|
|
Reporter | |
Updated•7 years ago
|
Summary: Firefox differs from Chrome/Edge on quirks-mode percent height resolution inside flex items → Firefox differs from Chrome/Edge on quirks-mode percent height resolution, on child of auto-sized flex-item & flex-container
|
|
Reporter | |
Comment 7•4 years ago
|
||
Chrome matches us on this behavior now. (They & we match the Firefox behavior that I described in comment 0. And presumably Edge does, too, since they're Chromium-based these days.)
--> Resolving as INVALID since it seems other browsers ended up changing to agree with our behavior here, so the bug was on there end (not ours) & there's no more interop problem to worry about.
Status: NEW → RESOLVED
Closed: 4 years ago
Component: Layout → Layout: Flexbox
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•