1100085 - Page Width on Facebook blog broken (due to new "min-width:auto" behavior on flex items, & huge image included in blog post)

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Saurabh Anand [:sawrubh]]

Attachment: Screenshot from 2014-11-16 15:04:37.png

STR:
* Open https://code.facebook.com/posts/360346274145943/introducing-data-center-fabric-the-next-generation-facebook-data-center-network/ in Nightly.

What happens:
The page is much wider than the screen. This is on the latest Nightly on Linux. Works fine in Chrome and stable Firefox. Not tests on other platforms. Most probably a regression.

Comment 1

[Saurabh Anand [:sawrubh]]

Attachment: Screenshot from 2014-11-16 15:04:47.png

Seems like it's been broken for quite some time (I had assumed that it couldn't have been broken for so long and given up hope on mozregression :P ). Here's the regression range:

Last good revision: 5b64c42742cd
First bad revision: db1ceb8f8d92
Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=5b64c42742cd&tochange=db1ceb8f8d92

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

dholbert's changes seem most likely.

Comment 3

[Daniel Holbert [:dholbert]]

Likely a version of bug 1043520. I'll take a closer look later today or tomorrow morning.

Comment 4

[Daniel Holbert [:dholbert]]

(which would mean it's not quite a "regression", but rather an expected result of implementing a not-quite-backwards-compatible spec change.)

Comment 5

[Daniel Holbert [:dholbert]]

Yup, this is a version of bug 1043520 --- it's a flex item expanding to accommodate the min-content size of a child, which is what the spec requires. (Though we're the only browser to implement this behavior, so far.)

tl;dr: The element <div class="_4cl6 _3f44"> needs to have "min-width:0", or "max-width:100%". (Either will work.)

MORE DETAILS:
 - The element <div class="_4cl6 _3f44"> is a flex item (its parent is display:flex), and it has the default "min-width" value (which is now "min-width:auto", introduced in the flexbox spec).  This means it will refuse to be smaller than its min-content width. (which is the min-content width of its widest child.)

 - That flex item has the following extremely wide child (intrinsic width is 1756px): <img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.2365-6/10541018_720080368083256_1810543636_n.jpg">.

 - So, the flex item's min-width ends up being that img's intrinsic width, which is 1756px, which is way wider than the page designers intended. (The flex container itself has "max-width:1024px", so the flex item & its children end up overflowing quite a bit.)

(You can tell that this <img> is the thing that's responsible for the huge min-content width, because the problem goes away if you set that <img> to "display: none" in devtools.)

Anyway, the correct solution here is to give the flex item "min-width:0", or perhaps "max-width:100%". We need to reach out to someone at Facebook to take a look at this.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Do we have contacts for this sort of thing at Facebook?

Comment 7

[Karl Dubost💡 :karlcow]

Yes. Not directly that should be certainly something we need to develop like we did with other big accounts. For Facebook, we currently go through Harald.

Comment 8

[:Harald Kirschner :digitarald]

ni? on Michael to file a bug via our FB reporting channel.

Comment 9

[Michael Ellis]

Bug details provided to Fb's Mobilepartnerfeedback.  Will update bug when feedback is received from their team.

Comment 10

[Mike Taylor [:miketaylr]]

Thank you Michael.

Comment 12

[Michael Ellis]

If this issue is only occurring in Nightly, it is unlikely we will be able to get FB resources to work on a resolution at this time. If Fb wont fix for Firefox specifically, we should explore with our team what this means for beta and GA and then circle back to FB

Comment 13

[Daniel Holbert [:dholbert]]

(In reply to Michael Ellis from comment #12)
> If this issue is only occurring in Nightly, it is unlikely
> we will be able to get FB resources

This isn't Nightly-only -- this is reproducible on all branches, including release.

(This site bug should be visible in any browser that supports "min-width:auto" on flex items. We shipped that support in Firefox 34 [via bug 984711 & bug 1015474], which was released last week. I'd expect this bug to reproduce in IE's current "Tech Preview" release, as well -- that's the only other browser that I'm aware of that's implemented this.)

Comment 14

[Daniel Holbert [:dholbert]]

(See comment 5 for the suggested fix, too -- it's pretty minimal.)

Comment 15

[Michael Ellis]

Thanks for the clarification, that will be very help info when trying to get FB's attention on the issue. I will bounce this back to their team.

Comment 16

[Michael Ellis]

Tested this bug and again after reporting to the FB team.  Blog page now renders properly in Firefox. marking this as Works for Me

 - Can someone confirm and close bug accordingly

Comment 17

[Daniel Holbert [:dholbert]]

Yup, the flex item in question (the parent of the wide-intrinsic-width <img> noted in comment 5) now has an explicit "max-width", which overrides the "min-width:auto" behavior that was involved here. (It sets an upper-bound for what "min-width:auto" resolves to.)

So, we can call this FIXED.