1128958 - grids in "allaboutwebservices"-powered sites are wrapping due to wide content & new flex item "min-width:auto" behavior in Firefox 35+

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[brandon]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:33.0) Gecko/20100101 Firefox/33.0
Build ID: 20141113143407

Steps to reproduce:

Hi,

The problem is with width not getting correct. Upto firefox version 33.1.1 which I have on one of my machine. Here is the screen shot for version 33.1.1 

http://awesomescreenshot.com/0324buc1f5


But if you check on any further update of firefox you will see the site like this http://awesomescreenshot.com/0194budo8f

You can check the sites 

http://realtorappreciationevents.com/
http://dronepilots.ca/


Actual results:

the right hand modules are not aligned properly. I believe it is fixed with width and so it is not allowing the more width 



Expected results:

See the screen shot of version 33.1.1 http://awesomescreenshot.com/0324buc1f5

the problem in upper versions of firefox is the right hand module are now on left hand bellow the contents 

http://awesomescreenshot.com/0194budo8f

They should be on right hand besides the middle container.

Comment 1

[[:Aleksej]]

Attachment: Reporter's screenshot for v33.1.1

Comment 2

[[:Aleksej]]

Attachment: Reporter's screenshot for a version after 33.1.1

Comment 3

[[:Aleksej]]

Works for me with
firefox-33.1.1.ru.linux64
firefox-34.0.en-US.linux64
2015-02-12-03-02-31-mozilla-central-firefox-38.0a1.ru.linux-x86_64

Are you still having the issue?  Does it happen in Safe Mode https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode ?

Comment 4

[brandon]

Hi,

yes it showing me same working with problem. I have wide screen monitor of 1920 x 1080px and on my browser all the right hand modules get shifted to left side bellow the calendar. This happens with less resolution screens as well. 

I have tested all firefox upgrade 34, 34.5 and even 35.1, but the look is same. I have checked it with other users who are in different countries and they are also having same problem with upgraded firefox.

Thanks

Comment 5

[brandon]

Hi,

Adding to my previous reply, what versions are they? I am using windows 7 PC. So I believe firefox versions must be different. To my understanding the problem is with setting of width for firefox browsers to fit to screen. I may be wrong though.

Thanks
Brandon

Comment 6

[[:Aleksej]]

> on my browser all the right hand modules get shifted to left side bellow the calendar.

Now I see what you mean, but unlike on your screenshot, nothing overlaps or is displayed partly.  Only the third column is below the first one.

wfm: firefox-33.1.1.ru.linux64
bug: firefox-34.0.en-US.linux64
bug: 2015-02-12-03-02-31-mozilla-central-firefox-38.0a1.ru.linux-x86_64

Comment 7

[brandon]

Hi,

sorry if I have not expressed it clearly. But yes the problem is with 3rd coloumn is getting shifted to bottom of first coloumn and I believe if you zoom in the browser it will fit to screen.

Another problem I noticed is I usually when zoom in or zoom out the firefox browser it used to reciprocate accordingly. Now If I zoom in, all the images, text will get small but they will not left their positions. 

this is 30% screen. http://screencast.com/t/IvltLOGpTL

This is 50% screen in chrome http://screencast.com/t/VRvNKJ7brz9

You see what I mean. In firefox I still stuck up with the size of the screen and text gets smaller, where as the same site chrome just get entirely smaller to get full page view if I zoom in the page. Or in chrome if I zoom out the page it will fill the screen entirely with site pushing all the left and right area out of screen which do not happen in firefox. 

Thanks once again.

Comment 8

[[:Aleksej]]

For comment #0, http://realtorappreciationevents.com/

good 2014-07-22-03-02-01-mozilla-central-firefox-34.0a1.en-US.linux-x86_64 SourceStamp=63f44b4968c2
bad  2014-07-23-03-02-02-mozilla-central-firefox-34.0a1.ru.linux-x86_64$  SourceStamp=82df3654cd80

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=63f44b4968c2&tochange=82df3654cd80

Comment 9

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

Does the page here use CSS flexbox (display:flex) ?

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to David Baron [:dbaron] (UTC+13) (vacation, returning March 2) from comment #9)
> Does the page here use CSS flexbox (display:flex) ?

Yup -- both sites have <div class="rt-flex-container"> which have the following style:
  display: flex;
  flex-flow: row wrap;

In both cases, the 3rd flex item (titled "Gold Sponsors") wraps because (1) wrapping is enabled for the flex container ("row wrap"), and (2) one of the flex items has some wide descendant which influences its implicit min-width, in Firefox 35 and later.

At http://realtorappreciationevents.com/, it's the 3rd flex item (the wrapped "column") that has a wide descendant -- and the wide descendant is <div id="rsmsc_scroller" class="rsmsc_scroller_class">, which has an explicit "width: 280px" (which is wider than the amount of space we have for the flex item).

At http://dronepilots.ca/, it's the 1st flex item that has a wide descendant -- and the wide descendant is the "dronepilots" logo, which has an intrinsic width of 590px.

In each case, the issue goes away if I give the flex item in question "min-width:0" to disable the new flex item min-sizing behavior.

So, this is indeed an instance of bug 1043520 -- we're matching the (updated) spec, and these sites need "min-width:0" on these flex items, to allow them to shrink to smaller than the intrinsic size of their contents.

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #10)
> Yup -- both sites have <div class="rt-flex-container">

(Sorry, at http://dronepilots.ca/ it's actually called ".rt-inner-container".)

Anyway -- at http://realtorappreciationevents.com/ , the site needs to add the following style to this stylesheet -- http://realtorappreciationevents.com/templates/rt_ricochet/css-compiled/grid-flexbox-responsive.css -- e.g. right after the existing ".rt-flex-container" rule:

  .rt-flex-container > * {
    min-width: 0;
  }


And at http://dronepilots.ca , the site needs to add the following style to this stylesheet -- http://dronepilots.ca/templates/rt_osmosis/css-compiled/grid-flexbox-fluid.css -- e.g. right after the existing ".rt-inner-container" rule:

  .rt-inner-container > * {
    min-width: 0;
  }


Brandon, are you by any chance involved with the websites & able to get these changes made?

(Note that while this currently may seem to be a Firefox-specific issue, it's really not -- it'll happen in Chrome as well once they fix https://code.google.com/p/chromium/issues/detail?id=426898 , and it should already happen in the IE next-gen tech preview, since they've got this new "min-width" behavior implemented there as well.)

Comment 12

[brandon]

Hi,

Yes I do have control on this site. I can make the changes. But for sure on the same PC using chrome this is not the issue at all. So all the settings are same. Even if I go ahead and downgrade the firefox on same PC to version 33.1.1 (which I have done to get the site working correctly) the same site start working prefect. 

So the only difference is upgrade of firefox to latest versions that too after 33.1.1 is the only change. All css and other stuff remain same. 

Hope this helps.

Thanks once again.
Brandon

Comment 13

[Daniel Holbert [:dholbert]]

(In reply to brandon from comment #12)
> Hi,
> 
> Yes I do have control on this site. I can make the changes.

Thanks!

> But for sure on
> the same PC using chrome this is not the issue at all. So all the settings
> are same. Even if I go ahead and downgrade the firefox on same PC to version
> 33.1.1 (which I have done to get the site working correctly) the same site
> start working prefect. 
> 
> So the only difference is upgrade of firefox to latest versions that too
> after 33.1.1 is the only change. All css and other stuff remain same. 

Right.

What happened here is that the CSS flexbox specification *changed* (in a non-backwards-compatible way, unfortunately), and Firefox has implemented the change to match the updated spec (which changed behavior). Chrome has not yet, but I expect that they will -- at which point new versions of Chrome would have this same issue.

Comment 14

[Daniel Holbert [:dholbert]]

Closing the loop here -- it looks like the sites have been fixed (& look fine in current Firefox Nightly).

Resolving as FIXED, from a tech-evangelism standpoint.