Last modified: 2014-06-12 14:44:05 UTC
IE6+7+? causes problems when scaling font size from browser settings via 'view > font size > bigger'. As result fonts are scaled hilarious big, e.g. compared to google. This is due to a IE bug, but can be avoided by a CSS hack. The body tag should scale fonts bei 100.01%. For testing puroses the following css code can be added to 'Spezial:Mypage/vector.css' body { font-size : 100.01%; } Scaling steps are now much more comfortable
This report is a bit confused. The actual issue is that font scaling is claimed to be broken in IE if the font size is specified in 'em' and works much better if it is specified in '%'. Since it is not a simple rounding error, a hack like '100.01%' is not needed for IE, '100%' should be fine. [[ja:MediaWiki:Vector.css]] does that. I'm not able to confirm this because IETester doesn't seem to allow scaling at all; a real IE 6 or 7 installation is needed. I tested IE 8 and found no difference. Besides, I really wonder why Vector contains 'html, body { font-size: 1em; }' at all; it cannot make a difference in compliant browsers and could just be omitted altogether. I will nevertheless attach 3 testcases so someone else can try to reproduce.
Created attachment 7691 [details] Testcase no. 1 A document that doesn't specify a font size on html and body. Testcases no. 2 and 3 should behave exactly the same in compliant browsers.
Created attachment 7692 [details] Testcase no. 2 A document that specifies the font size of html and body in 'em'. This is reported to cause trouble in IE 6 and maybe 7.
Created attachment 7693 [details] Testcase no. 3 A document that specifies the font size of html and body in percent. This is claimed to work better in IE versions where 'em' cause trouble.
I found out how to resize text in IETester (it's hidden in a menu) and can confirm how broken it is in IE 6 and 7. The following results in absurdly large resizing steps: html, body { font-size: 1em; } The following all work correctly: html, body { font-size: 100%; } html, body { font-size: medium; } html, body { font-size: inherit; } (not recognized by IE <= 7, that's why it works) ... as well as leaving it out altogether.
The problem isn't restricted to html and body btw., more info at http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/EM-font-resizing-bug.html.
Created attachment 7694 [details] Change font-size from 1em to 100% and work around rounding errors The key is to set 'html { font-size: 100% }'. This fixes 'em' font sizes for all descendant elements. The body element can then remain at 1em, but also be 100% or unspecified - doesn't matter. This unfortunately uncovers a rounding error in IE <= 7 that can be worked around by positioning the navigation containers wrt. bottom rather than top.
The rounding error is that 2.5em + 2.5em is not always the same as 5em so the tabs sometimes get disconnected from the #content area when the text is resized. Positioning the navigation containers wrt. bottom rather than top fixes that in IE 7, but not IE 6 (another bug ...) and can have undesired side effects for all browsers in some cases (it can e.g. disconnect the right navigation if only the text, but not the search field is downsized and also swaps the stacking order of the containers so the right one is in front of the left if the window is very narrow). Maybe it would be better to just change the font size from 1em to 100% and not care about the rounding error (which is already present anyway; it's just not so apparent because resizing is totally broken). This way IE 6 and 7 users won't get a perfect layout, but can at least reasonably resize the text.
*Bulk BZ Change: +Patch to open bugs with patches attached that are missing the keyword*
Unassigning default assignments. http://article.gmane.org/gmane.science.linguistics.wikipedia.technical/54734
entlinkt, thank you for the patch, and my apologies that it's taken so long for anyone to get back to you. I'm adding the "need-review" keyword to signal that the patch is still awaiting review.
Hi entlinkt thanks for the patch. I reviewed it but was unable to replicate or notice the rounding error you talk about and I wasn't too sure why the changes to #left-navigation and #right-navigation were needed as these seemed to have no effect on my local instance. It seems to me that simply adding font-size: 100% to the html tag should be enough - as you say "This fixes 'em' font sizes for all descendant elements" I've not worked on the vector skin before though so maybe I'm missing something glaringly obvious :)
Comment on attachment 7694 [details] Change font-size from 1em to 100% and work around rounding errors It seems that just font-size: 100%; should do the trick.
Change your settings? Clear cache?
I tested on IE6 from MultipleIEs on Windows XP. The text in second testcase scaled up much faster than in the other two.
(In reply to comment #12) > Hi entlinkt thanks for the patch. I reviewed it but was unable to replicate > or > notice the rounding error you talk about and I wasn't too sure why the > changes > to #left-navigation and #right-navigation were needed as these seemed to have > no effect on my local instance. > > It seems to me that simply adding font-size: 100% to the html tag should be > enough - as you say "This fixes 'em' font sizes for all descendant elements" > > I've not worked on the vector skin before though so maybe I'm missing > something > glaringly obvious :) I'm currently no longer able to test such old IE versions, so I'm not able to reproduce the rounding-error-related problem either. I remember it was something minor (some lines that should be perfectly aligned were off by 1 or 2 pixels at large font sizes). I'd suggest to forget about that and just set the font size of the html element to 100%. That's been in [[:de:MediaWiki:Vector.css]] for almost 3 years.
I always get concerned about minor bugs that stay open for almost 3 years....
Created attachment 15592 [details] Change font-size from 1em to 100% Please see the attached, updated patch. Just ignore the other changes from the previous patch, they were meant to work around some misalignment at larger font sizes due to rounding errors in the browser, which I don't care about anymore.
That's not "really" a patch, due to the first lines which are probably meant to be a comment instead? Also, any chance to upload this to Gerrit via http://tools.wmflabs.org/gerrit-patch-uploader/ ?
Change 139083 had a related patch set uploaded by Gerrit Patch Uploader: Vector: Workaround for legacy IE font-sizing issues https://gerrit.wikimedia.org/r/139083
(In reply to Andre Klapper from comment #19) > That's not "really" a patch, due to the first lines which are probably meant > to be a comment instead? The "prologue" of attachment 15592 [details] is harmless, it's a patch that can be applied just normal with "patch -p0 < ...". > Also, any chance to upload this to Gerrit via > http://tools.wmflabs.org/gerrit-patch-uploader/ ? I've tried that and it resulted in an extra .orig file for no apparent reason (the patch is not fuzzy and I *did* delete the "prologue" before committing, although that should not be necessary). I'm therefore giving up on this bug. All that would need to be done is replacing the rule html { font-size: 1em; } in the final CSS with html { font-size: 100%; }
Gerrit Patch Uploader sometimes (rarely) generates these files for some reason. I cleaned up the patch.
Change 139083 merged by jenkins-bot: Vector: Workaround for legacy IE font-sizing issues https://gerrit.wikimedia.org/r/139083
Thank you for the patch, and the persistence :)
