Closed
Bug 1128958
Opened 10 years ago
Closed 9 years ago
grids in "allaboutwebservices"-powered sites are wrapping due to wide content & new flex item "min-width:auto" behavior in Firefox 35+
Categories
(Web Compatibility :: Desktop, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: brandon, Unassigned)
References
Details
(Keywords: regression)
Attachments
(2 files)
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•10 years ago
|
||
Comment 2•10 years ago
|
||
Updated•10 years ago
|
Attachment #8564051 -
Attachment filename: 7271052.png → 7271052.jpeg
Attachment #8564051 -
Attachment mime type: image/png → image/jpeg
Updated•10 years ago
|
Attachment #8564050 -
Attachment filename: 7270993.png → 7270993.jpeg
Attachment #8564050 -
Attachment mime type: image/png → image/jpeg
Comment 3•10 years ago
|
||
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 ?
Flags: needinfo?(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
Flags: needinfo?(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•10 years ago
|
||
> 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
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Keywords: regression,
regressionwindow-wanted
Product: Firefox → Core
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•10 years ago
|
||
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•10 years ago
|
||
Does the page here use CSS flexbox (display:flex) ?
Comment 10•10 years ago
|
||
(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•10 years ago
|
||
(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.)
Component: Layout → Desktop
Product: Core → Tech Evangelism
Version: 35 Branch → Trunk
Updated•10 years ago
|
Flags: needinfo?(brandon)
Updated•10 years ago
|
Summary: browser width issue in new updates → grids in "allaboutwebservices"-powered sites are wrapping due to wide content & new flex item "min-width:auto" behavior in Firefox 35+
Reporter | ||
Comment 12•10 years ago
|
||
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
Flags: needinfo?(brandon)
Comment 13•10 years ago
|
||
(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•9 years ago
|
||
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.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Assignee | ||
Updated•6 years ago
|
Product: Tech Evangelism → Web Compatibility
You need to log in
before you can comment on or make changes to this bug.
Description
•