Open Bug 786641 Opened 12 years ago Updated 2 years ago

Microsoft outlook.com menu bar at top of window does not display correctly when minimum font size is set

Categories

(Core :: Layout, defect)

19 Branch
x86
Windows 8
defect

Tracking

()

People

(Reporter: vtonderjc, Unassigned)

References

Details

(Whiteboard: [platform-rel-Microsoft][platform-rel-Outlook])

Attachments

(3 files)

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0.1 Build ID: 20120713134347 Steps to reproduce: 1. Create new email message in outlook.com 2. Try to manage People using "People" window/page Actual results: 1. When "New" button in menu bar at top of window is clicked, options overflow at bottom of bar 2. "New" button already overflows the bottom of the bar even before any action is taken Expected results: 1. & 2. Should display at vertical center of (colored) button bar Works fine in Chrome and IE Problem remains after resetting Firefox
It is the second time within a week that I had to reset Firefox in order to resolve layout problems - and afterwards redefine my personal preferences. Is there an expeditious way to identify the source of the problems? (bugs?)
The problem description that I gave should at least give the developers an indication of roughly where the problem is located (and hopefully) fix the problem.
I tried this with Firefox 15 on Windows 7 and didnt see any difference from what Chrome rendered. Could you please attach a screenshot showing the issue you are seeing?
José Please see my comment (3) of 2012-08-29 11:03:27 PDT. It seems to me that something in a configuration file messes up the layout mechanism. Also see bug 784693. Screenshots regarding 786641 before and after Firefox was reset are included. Screenshots regarding 784639 do not make a lot of sense. I am sort-of convinced the two problems were fundamentally caused by the same (kind of) bug. See comment 2 above.
Text in vertical centre of menu bar
First attachment: text overflows bottom of menu bar
What add-ons do you have installed? Could you disable one by one and find out which one is causing these layout issues?
I first ran in safe mode with all add-ons disabled and that made no difference. The problem remained and I had to reset Firefox to get rid of the problem. The same happened with bug 784639. I have been running only the Lastpass add-on after I reset Firefox a week ago and again a day ago. I have been running Firefox intensively mostly with Gmail, outlook.com and bugzilla since I reset Firefox a day ago. The problem has not yet recurred. It MIGHT have been Lastpass that caused the problem. I am currently running with the default Lastpass settings since I reinstalled it. I will continue to do so for a few days before I put my personal preferences into Lastpass. If the problem recurs after I change the Lastpass preferences, that COULD be an indication that the problem was caused by Lastpass. As I said before, I am "convinced" the problem starts after certain information is entered into a Firefox JS configuration file (by either Firefox itself or by the add-on). I do not know enough about the Firefox internals to understand how a problem in a config file can cause erroneous layout. I am also not sharp enough to evaluate the Microsoft Javascript and CSS used in the menu bar layout of outlook.com.
I have now established that Firefox itself is definitely causing the problem. ------------------------------------------------ I was reading an email in outlook.com. When I got to the bottom of the email I scrolled up to the top of the page using the mouse and the vertical scrollbar. When I got close to the top of the window, the menu bar text moved down from the vertical center over the bottom of the menu bar. What was different this time is that the text on the menu bar did not stay in that position as was previously the case but returned to the vertical center where it belongs. The following happened after the first problem occurred while the scrollbar was being used: 1. When I clicked a checkbox to select an email the menu bar text moved down over the bottom of the menu bar. 2. When I clicked on a message to open it for reading, the same happened. 3. When I clicked New to start a new mail the same happened. I could not get the text back where it belongs without abandoning creating the new mail message. I got fed-up and decided to reset Firefox once more. Up to now the problem has not yet recurred.
After comment 11 I went back to outlook.com. I clicked on a folder containing messages I still needed to read. When the folder opened I clicked on a checkbox to select one of the messages. The moment I clicked the checkbox, the menu bar text moved down across the bottom of the menu bar. Deselecting the checkbox caused the text to move back to the right place. Flip-flopping the checkbox caused the text to move up or down every time. Clicking the New button to create a new message caused the text to move down and stay there as described in comment 11 What is interesting is that the problem this time happened the first time a checkbox was selected after logging out of Bugzilla and returning to the (still open) outlook.com page..
I have a long story but will try to keep it short: The text in the outlook.com menu bar drops down if ANY value (except "none") is specified for minimum font size. This does not happen in any other browser I tried. Even if the minimum font size is specified larger than the current font size, the text in the menu bar drops down. The larger the minimum font size is specified, the more the the text drops down. If a minimum font size of 24 is specified (for test purposes) the menu bar text on my screen drops to about 10mm BELOW the menu bar. The text outside (below) the menu bar is invisible but the links can still be activated by moving the mouse over them (impractical). I could find no work-around for the bug, except for removing the minimum font specification every time the menu bar is needed and putting it back when emails with miniscule font sizes (as small as 6pt) are encountered. Please fix this bug. PS. I did an absolutely clean install of Ff 15 using Revo uninstaller to clean out all traces of Firefox in an effort to identify the root cause of the bug.
(In reply to J Chris VanTonder from comment #10) > > It MIGHT have been Lastpass that caused the problem. Did the problem go away when you disabled this extension?
"No" to your question in comment 14. Please read comment 13. The bottom line is: The bug(s) ARE UNDOUBTEDLY caused by the way the "Minimum font size" option is implemented in Firefox. By the way, the exact same bugs are present in Firefox 12 for Windows 7. The problem is aggravated when Zoom is used when a minimum font size is specified. Zoom parameters are (incorrectly?) stored in one of the Firefox parameter files AND NEVER PROPERLY RESET. The only way to recover after zoom have been used with Minimum font size specified is to RESET FIREFOX. THE PROBLEMS DESCRIBED IN ALL COMMENTS BY MYSELF BEFORE COMMENT 13, ARE CAUSED BY THE FIREFOX BEHAVIOURS DESCRIBED IN THIS COMMENT. Fixing the bugs in Page zoom may alleviate the matter. Fixing the bugs in Minimum font size will let them go away. This comment also applies to bug 784639.
Component: Untriaged → DOM
Product: Firefox → Core
The most likely issue with the minimum font size bit is that the page is using a very small font-size somewhere to affect its layout, so once you set a minimum font size that hack on the page breaks. That doesn't indicate a bug in minimum font size per se; it's trivial to write pages that break when a minimum font size is set. That's why it's not on by default... As far as zoom goes, it's stored on a per-site basis. You can reset the zoom for a given site by just changing the zoom setting on that site. Jose, can you reproduce the issue with a minimum font size set? If so, are you wlling to try minimizing a testcase? Mihaela, layout issues are _very_ unlikely to be a DOM bug. ;)
Component: DOM → Layout
Yes, I can reproduce now (with Firefox 15). Testcase coming up.
Attached file Testcase (deleted) —
Steps to reproduce: 1. load testcase 2. text should be inside blue box 3. change "minimum font size" to 16px 4. see text move Not 100% sure if this is what the issue was. Chrome renders this different, but nothing changes if the minimum font size is changed to 16. Hope it helps.
So the issue is the <span>, presumably. It has a font-size of 8px by default, and a 38px line-height. So its ascent is something like 15px + ascent of 8px font. Now when you apply the min font size, we scale up that font-size to 16px. And we also scale up the line-height; see bug 158868. This is needed for cases when the line-height is used properly to achieve interline spacing. But this page is using line-height as basically a poor man's top margin or something. So the span ends up with an ascent of 30px + ascent of 16px font, and that pushes the position of the baseline down, of course. In particular, below the 40px tall blue box. I'm really not sure what we can do here without regressing bug 158868... David?
Blocks: 158868
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Microsoft outlook.com menu bar at top of window does not display correctly → Microsoft outlook.com menu bar at top of window does not display correctly when minimum font size is set large enough
Proposal: I realise that it could be extremely complicated to maintain proper page layout if some of the font sizes intended by the page designer are enlarged and others not. To avoid further complications if the page is zoomed when a minimum font size is specified, I propose the following: 1. When a page is zoomed to a size other than that intended by the designer, Minimum font size - if specified by the user - should be ignored EXCEPT when the zoom level is zero (reset, Ctrl+0). Referring to comment 19: 2. How do other browsers handle the assumed use of line height. 3. What would be the proper/preferred/proposed way to accomplish the page designer's objective?
Summary: Microsoft outlook.com menu bar at top of window does not display correctly when minimum font size is set large enough → Microsoft outlook.com menu bar at top of window does not display correctly when minimum font size is set
It's not clear to me why zooming is relevant. The minimal testcase certainly doesn't involve zooming... > 2. How do other browsers handle the assumed use of line height. Chrome makes text on subsequent lines overlap, like we did before we fixed bug 158868, so it's totally unreadable. Safari doesn't have a way to set a minimum font size that I can find. Opera does the same as Chrome. > What would be the proper/preferred/proposed way to accomplish the page designer's> > objective? In this case? Unclear. One interesting option is to zoom line-height with font-size on blocks but not on inlines. I wonder whether that would be reasonable.
You are right. Zooming is not important. I was thinking back to my efforts in locating the source of the problem. Now that I know what it is, I did some more testing. During this testing zoom was working just fine. I suggest that this bug be closed BUT That some additions are made to Firefox Help as follows: When Firefox Help is searched for "page layout problems", the following paragraph appears at the top before specific bug reports are listed: Font size and zoom - increase the size of web pages Zoom is a feature which allows you to increase or decrease either the size of a web page or the size of the text. This article explains how it works. 1. Extend the paragraph above to indicate the fact that specifying a Minimum font size may cause problems when page designers apply somewhat "quirky" methods to accomplish required layouts. Suggest that Minimum font size be turned off to see if the problem perhaps no longer exists. (Or something to that effect) 2. Also add this (extended) paragraph at the top of the results displayed when only "layout problems" - not "page layout problems" - are searched for. 3. Add a warning to the above effect also to the top of the kb page http://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages?s=page+layout+problems&r=1&as=s Thanks to everybody who contributed. I managed to identify the source of the problem myself (over the weekend) but your explanations helped me understand what was really "cookin".
(In reply to Boris Zbarsky (:bz) from comment #21) > One interesting option is to zoom line-height with font-size on blocks but > not on inlines. I wonder whether that would be reasonable. That would lead to pieces of text that were made large by specifying font-size on inlines (and have line-height specified to non-number) would start overlapping, no? What would it help?
Well, it would help this testcase. I guess the question is how common line-height is on inlines that are expected to wrap...
Is this a case where line-height is used for vertical centering of a small piece of text? I think that (a) that's a relatively rare use and (b) I don't see why it would correlate with whether the line-height is on an inline or a block.
It's actually being used to push down a small piece of text and the entire line it sits on...
Hmm, though maybe they did try to basically push it down so it would be vertically centered.
I have not had a response from Microsoft about their menubar display problem. Very annoying. It makes their 'new and improved' LiveMail not-so-Hotmail.
I have since moved on to Firefox 19 on Windows 8 Pro. The problems still remains but occurs only on Firefox. I suggest that "Firefox" registers a Microsoft account and that a knowlegeable Firefox dev person enter a Question in the Microsoft account, Hotmail, SkyDrive |Outlook.com |Email |Reading, Writing and Formatting forum Hopefully one can get Microsoft so far that the forum moderator sees fit to enter into a private conversation in order to resolve the problem. " You have a private reply to this message. Click here to read it on our secure private messages section. " Irony: One has to use IE to be able to enter into a private conversation with Microsoft in order to resolve a question. The private conversation pages do not work in Firefox 19 !
OS: Windows XP → Windows 8
Version: 14 Branch → 19 Branch
Hello, I'm a Development Lead on Outlook.com I'll start taking a look at this to see where we can workaround on our side or partnering to find a fix on Mozilla's side. Feel free to ping me personally offline. I'll update here as I have any new info. Cheers, Raul
Whiteboard: [platform-rel-Microsoft][platform-rel-Outlook]
platform-rel: --- → ?
platform-rel: ? → ---
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: