max-content width calculation doesn't account for possibility that two floats in different blocks could be next to each other

NEW
Unassigned

Status

()

Core
Layout: Floats
--
major
10 years ago
2 years ago

People

(Reporter: Noah Lamson, Unassigned)

Tracking

({regression, testcase})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [float pref width] WONTFIX?, URL)

Attachments

(4 attachments)

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13
Build Identifier: Mozilla/5.0 (Windows ows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13

FF3 shows the advert falling below
FF2, IE6+ show the page complete
http://kizn-fm.fimc.net/

Reproducible: Always

Steps to Reproduce:
1. Go to site in FF2
2. Go to site in FF3
3.


Expected Results:  
FF3 should handle the CSS the same
(Reporter)

Comment 1

10 years ago
Created attachment 314880 [details]
FF3 - CSS handling

Comment 2

10 years ago
Created attachment 315086 [details]
Testcase #1 (blocks corresponds to those on the site)

Comment 3

10 years ago
The difference is that #contentContainer ends up with a content width of 768px
in Fx3 and 773px in Fx2.  This is enough to fit the first two floats (yellow
and lime) on the first line. To fit #cubeAd on the 2nd line we would need
#video:227px + padding:5px + #tuneGenie:236px + padding:5px + #cubeAd:300px
= 773px, which fits exactly in Fx2, but not in Fx3.

So, why is #contentContainer sized too small in Fx3?
(it's a width:auto float, so it's "shrink-to-fit")
http://www.w3.org/TR/CSS21/visudet.html#float-width

The outer-most container #frameworkLeft (red) has 792px and its child
#contentContainer has horizontal padding of 19px, thus 773px is the
"available width" for the content.  The difference seems to be in
how we calculate the preferred width in Fx2/Fx3.
IIRC, in Fx2 we reflow the content with an unconstrained width to
figure out the preferred width, which correctly results in 773px.
In Fx3 we ask each block its preferred width without reflowing,
which does not take into account how floats in different blocks
potentially could stack up against each other.
Component: General → Layout: Floats
Keywords: regression, testcase
OS: Windows XP → All
Product: Firefox → Core
QA Contact: general → layout.floats
Hardware: PC → All

Comment 4

10 years ago
Created attachment 315088 [details]
Testcase #2 (minimal testcase)
Created attachment 8730161 [details]
FF2vsFF45tc2.png

Hi,

User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0

This issue is still reproducible on the latest Firefox release (45 Build ID 20160303134406) and on the latest Nightly (48.0a1 Build ID 20160313030418). I've added a screenshot of how FF2 handles this versus FF45. IE seems to be the only browser to handle this right.

Thanks,
Cipri
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: CSS issue between FF2 & FF3 → max-content width calculation doesn't account for possibility that two floats in different blocks could be next to each other
Whiteboard: [float pref width] WONTFIX?
You need to log in before you can comment on or make changes to this bug.