Closed Bug 684414 Opened 13 years ago Closed 10 years ago

facebook.com - Facebook's layout is messed up when increasing the font size

Categories

(Web Compatibility :: Site Reports, defect)

Product:
Web Compatibility
Component:
Site Reports
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WORKSFORME

People

(Reporter: around9, Unassigned)

References

(
URL
)

Details

(Keywords: testcase, top100, Whiteboard: [havefix] [needaccount] [country-all] )

Attachments

(3 files)

Reduced testcase from http://www.facebook.com/jidanni?sk=wall
2.31 KB, text/html
Details
Minimal testcase
389 bytes, text/html
Details
http://www.facebook.com/Firefox
112.78 KB, image/png
Details 
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0.1) Gecko/20100101 Firefox/6.0.1
Build ID: 20110830092941

Steps to reproduce:

I tried Firefox Preferences > Advanced > Network > Clear Caches. No effect.




Actual results:

Nothing.


Expected results:

I assume that the Facebook page should have gone back to its normal appearance, with the Profile pic up in the upper left, Friends listed down the left-hand column, Wall posts in the wider middle column, and Events and ads in the right column.
Did the following appear in my Bug report? 

The way the page looks now, with FF 6.0.1, is that everything is crowded onto the right half of the page; the left half is empty.
Does the issue still occur if you start Firefox in Safe Mode? http://support.mozilla.com/en-US/kb/Safe+Mode

How about with a new, empty profile? http://support.mozilla.com/en-US/kb/Basic%20Troubleshooting#w_8-make-a-new-profile

Please attach a screenshot showing the issue
I tried starting FF in Safe Mode. No change. I have tried to attach screen shots, as requested, of FF's messed-up FB layout, vs. Chrome's perfect layout, but get a message saying the attachment is invalid.

The new, empty profile idea involves a lot of steps, and I'm worried that if I miss one, I'll wind up with an even worse situation that will affect more than just my Facebook page, but I'll keep the e-mail and links and try it with someone who knows how to do it.

But what I don't understand is why, since 2005 when I started using FF as my main browser, it's only in the last few months that every update of FF results in new problems. FF was totally reliable until recently. Now I'm afraid to do any further updates. I don't know what worse problems will result.
I can confirm this bug on Ubuntu Lucid / FF 6.0.1. I renamed the profiledir and started FF with a fresh profile, then the layout was normal.
In my case the bug was caused by the string:

user_pref("font.minimum-size.x-western", 16);

in ~.mozilla/firefox/profile/prefs.js

To fix it, go to "Edit > Preferences > Fonts & Colors > Advanced" and set "Minimum Font Size" to anything below 14. Anything above 13 will cause Firefox to choke on Facebook's layout. Note that you will have rather tiny fonts on a highres screen, so the bug still needs to be fixed by the devs.

(I translated the "Edit > Prefs" menustuff above from Dutch so you might have to dig a little). I think in Windoze the Prefs menu resides under Extra.
Maccus, your fix works. On my Mac, the pathway is Firefox > Preferences > Content > Advanced [to the right of "Default Font"] > Minimum Font Size > [I set it to "13"]. Right away, my Facebook page looks normal again. Thank you!

But now I'm still wondering why each new update of Firefox results in some problem or another, when, for six years Firefox has been completely reliable for me? I've always had a Mac laptop, either an iBookG4 or my present MacBook. What's going on with Firefox? I'm thinking of unchecking the box that allows automatic updates.
I'm an older user. So naturally I hit one more CTRL++ (zoom) than you
young whippersnappers... and _Kabam_, FF is F*k'd.
How dare Firefox 8 not be able to deal with the world's #1 website!
Fix it now or I'll report you all to the International Commerce Commission.
This is a bad written report. There are no steps to reproduce and no attached screenshots. Don't assume that every person in the world is using facebook !

This could be a bug in facebook or a bug in Gecko.
The difference between FF6.0 and FF6.0.1 is only a removed SSL root certificate and that can't cause layout problems like this one.
We need a regression range if this is really a bug in Gecko and I'm willing to do a regression search if someone posts steps to reproduce and if you don't need an Account at Facebook.
As I said, I tried to attach screen shots, but got the message that they were invalid. Tried attaching them as either .png or .jpg. Didn't work.
(In reply to Matthias Versen (Matti) from comment #9)
Read Bug #684645 for your screenshot. Use say Firefox 8 on Linux like I did. Do not use Windows as my pals say they didn't see the bug there. Login to your Facebook account (yes you need a Facebook account.)
Now on somebody's wall page, e.g., http://www.facebook.com/jidanni start zooming with CTRL++. Note you must be on a person's wall page, not a fan page, and not a person's Info page. Maybe it will even work on you own wall page.

Facebook doesn't even let people in if they aren't using an approved browser... let's not risk Firefox's rating.
You must be logged in an looking at e.g.,
http://www.facebook.com/jidanni?sk=wall not
http://www.facebook.com/jidanni?sk=info
nor something that redirects and looks the same as the latter.
Then start hitting CTRL++'s till it goes Kablam.
Note my account above has the widest permissions set,
whereas other people's walls might not even be accessible, though you are logged in, which by the way, you must be, even if it violates your principles... just tell your friends you are doing it for a higher cause.
And while you are fixing that, also find out why one cannot horizontally scroll when composing messages on smaller screens. You know, when looking at URLs like
http://www.facebook.com/messages/?action=read&tid=id.999999999999
Note I said "like", as you will have to compose you own message.
Maccus's fix worked.
only one issue in one bug report please.
We need either a regression range or a minimized testcase and I can't do that without Account.
(In reply to Matthias Versen (Matti) from comment #15)
> only one issue in one bug report please.
> We need either a regression range or a minimized testcase and I can't do
> that without Account.
OK . . . I made Bug 685521 which doesn't require an account.
(In reply to around9 from comment #14)
> Maccus's fix worked.
Yeah well in the menus my minimal font sizes are all "none". Proof:
$ grep -c font    .mozilla/firefox/*.default/prefs.js
13
$ grep -c minimum .mozilla/firefox/*.default/prefs.js
0

Now what? Switch to Google Chrome while we wait for somebody with a Facebook account to Confirm this bug?
I know someone who has a Facebook account at your company,
the guy who set up http://www.facebook.com/Firefox .
>I know someone who has a Facebook account at your company,
I'm a user like you who volunteers here. Firefox is open source...
Keywords: qawanted
I think the layout is correct for the given markup/styles/font prefs.

Setting the minimal font size makes the search box have slightly larger
height, the float shrink-wraps that height (plus some paddings/borders)
making the float overflow the outer block which has a fixed 41px height.
The float further down the page needs to be to the right of the first
float per the rules in CSS 2.1, 9.5.1:
http://www.w3.org/TR/CSS21/visuren.html#float-position

The Facebook page has the same layout in Opera when I set the minimal
font size there.
Component: General → Layout: Floats
Keywords: qawanted → testcase, top100
OS: Mac OS X → All
Product: Firefox → Core
QA Contact: general → layout.floats
Hardware: x86 → All
Whiteboard: INVALID?
Version: 6 Branch → unspecified
The general public is beginning to be affected...
http://www.facebook.com/Firefox/posts/245883872116058
If you try an old version of Firefox, do you still see the problem?  This sounds much more likely to be a change that Facebook made that happened to be at about the same time as a Firefox release.
(In reply to David Baron [:dbaron] from comment #23)
> If you try an old version of Firefox
All I know is I am reporting a bug with the latest version I can use,
$ apt-cache policy iceweasel 
iceweasel:
  Installed: 8.0~a2+20110905042011-1
  Version table:
 *** 8.0~a2+20110905042011-1 0
        500 http://mozilla.debian.net/ experimental/iceweasel-aurora i386 Packages
That is all I am responsible for. And I don't want to "mess up my set up" by "fiddling around" otherwise. Thanks.
The problem also occurs in Firefox 3.6.x

This problem needs to be fixed by the Facebook devs.
I think removing "height:41px;" from the "#blueBar.nph" rule is the right fix.
Assignee: nobody → english-us
Component: Layout: Floats → English US
Product: Core → Tech Evangelism
QA Contact: layout.floats → english-us
Summary: FF 6.0.1 has totally messed up Facebook's layout. → facebook.com - Facebook's layout is messed up when increasing the font size
Whiteboard: INVALID? → [havefix]
(In reply to Mats Palmgren [:mats] from comment #25)
> This problem needs to be fixed by the Facebook devs.
The problem does not occur with Chromium.
There is little chance of getting any word in edgewise to Facebook.
I have an idea. Fix the bug in Firefox.
(In reply to jidanni from comment #26)
> I have an idea. Fix the bug in Firefox.

Except there's no bug to fix; perhaps you didn't actually read comment 25 before replying to it. And lose the attitude, fast.

CCing the FB TE contact.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Screenshots would be super helpful.
> There is little chance of getting any word in edgewise to Facebook.

Seriously?  C'mon now; if nothing else we know people who work there personally...

ccing Chris and Shawn.
I already mentioned where I put the screenshots.
Also put your money where your mouth is, and report a bug in Chromium for not rendering it ugly.
Also if Facebook really can hear anything anybody says anymore, then I challenge them to say even one word "we hear ya". OK, that was three words.
As far as my attitude young man, I believe you need to watch more Rodney Dangerfield clips, starting with http://www.youtube.com/watch?v=5fScy9BgPEs&list=PL6E40919035151385 .
(In reply to jidanni from comment #30)
> I already mentioned where I put the screenshots.

No, you didn't.

> Also put your money where your mouth is, and report a bug in Chromium for
> not rendering it ugly.

Are your font settings exactly the same in Chromium and Firefox?

> As far as my attitude young man, I believe you need to watch more Rodney

I don't need to watch anything, but your reading comprehension skills need a workout. Might I suggest you start with this page:

https://bugzilla.mozilla.org/page.cgi?id=etiquette.html

which, you'll recall, you agreed to abide by when you signed up for your account. Starting off with threats is not the way to win friends and influence people. If you continue to abuse people here, I'll have your account suspended. Are we clear?
I've file a bug for this over at Facebook. Again, screenshots would be very useful.
Thanks. We're looking into it.
We are testing a fix which should be live by Weds of this week.
Problem gone.
(In reply to jidanni from comment #36)
> Problem gone.
Problem back. iceweasel:
  Installed: 8.0~a2+20110915042012-1
Exactly. Since 17 sept the problem is back. Firefox 6.0.2.
(In reply to Maccus from comment #38)
> Exactly. Since 17 sept the problem is back. Firefox 6.0.2.
No problem whatsoever in chromium. I never touched the fonts etc. settings in either. All one needs to do is CTRL++ a few times. Firefox "falls apart".
Also I was reminded that Cc: browser-bugs@fb.com is for bugs in browsers that Facebook needs to make workarounds for.
Checked with the facebook folks.  They apparently accidentally backed out the fix to their code as part of a large feature rollout on their side.  They're relanding the fix and it should be out this coming Tuesday evening (presumably Pacific time).
Now broken for Pages too: visit
http://www.facebook.com/Firefox
CTRL+0 CTRL++ CTRL++ CTRL++
after the third CTRL++ the screen splits apart,
only the left column stays at top.
Mozilla/5.0 (X11; Linux i686; rv:9.0a2) Gecko/20110930 Firefox/9.0a2 Iceweasel/9.0a2
(In reply to jidanni from comment #41)
> only the left column stays at top.
I meant only the right column stays at top.
The left and center columns are forced down below.
Is there any workaround for this? ...other than using Chromium which is not affected.
If I use CRTL+0 the characters are too small.
Can you please sympathize with my need to use CRTL++.
Is anybody else affected?
Mozilla/5.0 (X11; Linux i686; rv:9.0a2) Gecko/20111007 Firefox/9.0a2 Iceweasel/9.0a2
Am I crazy?
Anybody home?
Should I just give up and stop using the browser?
I'll accept any advice.
Please say something.
Have you reported this to the facebook folks?  Seriously, this is an issue in the way their page is designed...  It's making assumptions that are just not true when you zoom.
(In reply to Boris Zbarsky (:bz) from comment #44)
Boris, can you reproduce it?
All you need to do is
* Must login to Facebook, else you won't trigger the bug.
* browse http://www.facebook.com/Firefox
* Hit CTRL+0 CTRL++ CTRL++ CTRL++
P.S., there is no way for anybody to get through to Facebook. They have literally half a billion users.
Please make Firefox workaround this bug just like Chrome, etc. do.
> Boris, can you reproduce it?

I don't have a facebook account.

> P.S., there is no way for anybody to get through to Facebook.

Uh..  I did send mail to our Facebook contacts when I made comment 44, and they're looking into it, but hearing from their users might help.  It might also go faster if you were able to talk to them directly instead of me forwarding what you say to them and vice versa.

> They have literally half a billion users.

So do we, and you can clearly get through to us, no?
Hi jidanni,

I'm happy to help fix this for you on Facebook's end.  Unfortunately, I can't reproduce the problem in any version of Firefox on any platform.  I even installed Ubuntu + Aurora today to try and reproduce there, to no avail. :P

Can you provide me with any more information about your environment / steps to reproduce?  I'm sorry this issue has been such a pain for you, and thanks a lot for your help.
(In reply to Tom Occhino from comment #47)
I can now confirm that the problem only occurs on smaller screens.
I was using a seven inch EEEPC 702.
Can you try the above experiment using such smaller screens?
I was using it at the default resolutions...
(Hopefully not important, but I was using
$ apt-cache policy iceweasel
iceweasel:
  Installed: 9.0~a2+20111007042010-1
  Candidate: 9.0~a2+20111007042010-1
  Version table:
 *** 9.0~a2+20111007042010-1 0
        500 http://mozilla.debian.net/ experimental/iceweasel-aurora i386 Packages
). Thanks.
Ah, thanks a lot jidanni.. The 'only occurs on smaller screens' piece was key.  I just committed a fix and will have it pushed to production along with tomorrow's release.
(In reply to Tom Occhino from comment #49)
Thanks! Also have a look into what happens when reading various parts of ones
http://www.facebook.com/messages/
on smaller screens. One can never horizontally scroll to view the rightmost part of the screen if it is off-screen.
(In reply to Tom Occhino from comment #49)
> with tomorrow's release.
Thanks for fixing it. It now is OK.
However do you see how the entire right hand side of the screen is still inaccessible,
no way to horizontally scroll, on smaller screens when reading messages, e.g.,
http://www.facebook.com/messages/other/?action=read&tid=... ?
Anybody home?
Jidanni, with all due respect, I don't see how the new issue you're mentioning out has anything to do with this thread or with Firefox. This particular issue having been resolved, I suggest we now close this thread and move on.

If there are other Facebook issues you're bumping into, please do file bugs directly with us.

Thanks!

--tobie
(In reply to Tobie Langel from comment #52)
> Jidanni, with all due respect, I don't see how the new issue you're
> mentioning out has anything to do with this thread or with Firefox.
It happens in Firefox.
> If there are other Facebook issues you're bumping into, please do file bugs
> directly with us.
I tried that many times. It is always a black hole. It is not your fault. It's just that your organization
is too big.
From me the user's point of view, they appear to be Firefox bugs, especially as they don't appear in other browsers.
It's not a black-hole. Trust me. Bugs report get triaged and fixed. It just sometimes take longer than you would want them to.
(In reply to Tobie Langel from comment #54)
> It's not a black-hole. Trust me. Bugs report get triaged and fixed. It just
> sometimes take longer than you would want them to.
All unbeknownst to the user, who is cut out of the loop. That's why he soon gives up trying.
Anyway, the right side of the screen is inaccessible when reading Facebook messages with Firefox on smaller screens.
I was told to and agree to stop commenting. I can be reached by email.
Problem back starting this week.
Reproduce with CTRL+0 then CTRL+++++
$ xrandr 
Screen 0: ... current 800 x 480
Mozilla/5.0 (X11; Linux i686; rv:15.0) Gecko/20120622 Firefox/15.0a2 Iceweasel/15.0a2
Chromium not affected.
Is it still an issue?
Assignee: english-us → nobody
URL: https://facebook.com/
Component: English US → Desktop
Whiteboard: [havefix] → [havefix] [needaccount] [country-all]
OK it seems OK now with FF 34 and current Facebook. So I'll drop off the CC list.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → WORKSFORME
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: