Home Dashboard Directory Help
Search

IE10 not recognizing font decloration when rem is used as font-size unit of measure by EricMiner


Status: 

Closed
 as By Design Help for as By Design


Type: Bug
ID: 772679
Opened: 11/28/2012 10:34:09 PM
Access Restriction: Public
1
Workaround(s)
view
1
User(s) can reproduce this bug

Description


This bug is not 'by design'. I suspect it is being closed automatically and not by a member of the team. Please speak with Ray Bango about this bug before attempting to close it as 'by design' again.



When the rem unit is used for font-size in either the 'font' or 'font-size' declaration the entire rule is ignored and the user agent default fort is used.

In basic terms, the use of rems to set type sizes causes IE10 to not even see the full rule.

See http://www.minerbits.com/REM-test-2-GF.html for a full test case
Details
Sign in to post a comment.
Posted by Jonathan Sampson on 10/14/2013 at 5:09 PM
Check the directory for "Rey Bango," (@reybango) the initial author had mistakenly written "Ray". This issue cannot possibly be by-design, as IE11 behaves differently (unless IE11's implementation is unintentional). See http://jsfiddle.net/9x5Q2/1/ for a demonstration.

If this is going to be closed, close as won't-fix, given IE11 is nearing its launch date and will likely wipe out IE10.
Posted by Microsoft on 7/1/2013 at 11:44 AM
Thank you for contacting us again but there is no one by that name in our directory here at MSFT. Now there are many partners or community liasons that help us. If you have additional information that might assist me in locating this person you are referencing, please feel free to post it.

I did go back and retest your demo page against IE11, IE10/Win8. IE10/Win7. FireFox. Chrome and Safari. I carefully studied each of your entries against the other browsers and the fonts are exactly the same. The font-face and the size were no different and Internet Explorer was rendering the standard mode. So this is behaving as it was designed.

If you have additional information that can help us recreate this issue — such as a specific url, more detailed steps, test results from different machines, or additional conditions — please reactivate the bug or submit a new bug with more details on how to reproduce the issue.

We welcome more feedback in the future.

Best regards,

The Internet Explorer Team
Posted by EricMiner on 6/12/2013 at 12:28 PM
Is this bug being closed automatically? This is not by design. Again, please speak to Ray Bango about this isse.
Posted by Microsoft on 6/12/2013 at 8:01 AM
Thank you for your feedback.

The issue you are reporting is by design.

Best regards,

The Internet Explorer Team
Posted by EricMiner on 3/21/2013 at 10:36 PM
This behavior is NOT "by design" there are internal bug numbers open on this issue. Please, keep this bug id open until those are closed. If you have any questions about this please check with Rey Bango.
Posted by Microsoft on 3/21/2013 at 12:46 PM
Thank you for your feedback.

The issue you are reporting is by design.

Best regards,

The Internet Explorer Team
Posted by EricMiner on 2/21/2013 at 1:46 PM
This problem has been recognized as a bug by the IE Team and is logged under different 'internal' bug IDs. Keep this bug ID open until the problem is fixed under the 'internal" bud IDs.
Posted by dstorey on 1/21/2013 at 4:56 PM
This works in every other browser/engine, and using rem in the font property is an important use-case. Check the following in any recent browser of your choosing except IE: https://dl.dropbox.com/u/444684/ie/fontrembug.html

I don't read the spec (or see the behaviour described in the UAs mentioned) that would support this being by design.
Posted by EricMiner on 12/6/2012 at 8:14 PM
I'm afraid that I have to disagree with your conclusion considering this behavior of IE10's.

First from the W3S Spec you referenced..."5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units
Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the computed font metrics of the element on which they are used. ..."

and

"rem unit
    Equal to the computed value of ‘font-size’ on the root element.
    When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value."

The above seems to say that the REM unit is an absolute value based on the declared font-size of the root element (which in HTML is the HTML element).

Time after time that I test this on Chrome Version 23.0.1271.95 m and Firefox 17.0.1 the test case does not fail and in fact properly displays the fonts as expected. I will test on Safari soon. Whereas the same code run on IE10win8 and 7 fail to display the fonts as spec would expect.

The code for this test page validates at The W3C CSS Validation Service with no errors: results can be found here -
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fminerbits.com%2FREM-test.html&profile=css3&usermedium=all&warning=1&vextwarning=

On a personal note I am not and have not been an IE-basher and have been very impressed with IE10. But, I do as the Team to go back and look into this issue again.

Thanks for your time,

Eric Miner
eric@minerbits.com
Posted by Microsoft on 12/5/2012 at 2:24 PM
Thank you for your feedback.

The issue you are reporting is by design.

We determined that the CSS in the example provided is not in compliance with W3C Specifications and implementations. The example fails in Firefox, Chrome, Safari, IE10Win8 and IE10Win7. Below is a link with the information you will need to implement these properties(em, rem) and know the inheritance and support rules.

http://dev.w3.org/csswg/css3-values/#relative-lengths

Best regards,

The Internet Explorer Team
Posted by Microsoft on 12/3/2012 at 10:24 AM
Thank you for your feedback. We will be investigating this issue further.

Best regards,

The Internet Explorer Team
Sign in to post a workaround.
Posted by dstorey on 1/21/2013 at 5:10 PM
You need to use the rem unit using the font-size property instead of the font shorthand. Increases the amount of CSS needed, but at least it works :)

font: bold 10rem sans-serif;

becomes:

font-family: sans-serif;
font-weight: bold;
font-size: 10rem;