Re: [css-d] font-sizing bug in generated content in IE 10 ?
I've been thinking about this issue since it was first posted because it seems to relate, at least a bit, to a bug in IE9 and 10 that I reported late last year. See IE bug ID 772679 http://connect.microsoft.com/IE/feedback/details/772679/ie10-not-recognizing-font-decloration-when-rem-is-used-as-font-size-unit-of-measure . In thebug IE won't use the REM unit in any font-size rule including the font shorthand syntax. In fact does it not use the REM it completely ignores the entire font related rule and falls all the way back to its default serif or sans-serif skipping the full stack. Interestingly, IE will use the REM unit to size elements (as I do regularly). I battled with their bug reporting system for months, it kept closing the bug with 'as designed' and I had to keep reactivating it. Finally I contacted out Fearless and Famous Leader, Mr. CSS Wizard himself, Eric Meyer who talked to some IE Engineers he knows who then started working on the issue via internal bug IDsMany thanks Eric!! Anyway, this issue shines another light on the whole problem in IE. As I recall generated content is handled differently by the UA's parser. My guess is that when generated content is present a header is added to it before it enters the CSS parser and this header contains information that then allows IE to recognize and use the REM unit. I'll add a note to the bug ID containing the info from this problem...maybe it will help them id and fix the bug faster. In the meantime the only work-around that I've found is to include a font-sizing rule using pixels before one using REMs. Yes, I know it's a pain but the REM unit is just too powerful and flexible to let EM get in the way. Hope that helps a bit, Eric __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
Le 26 avr. 2013 à 00:17, Gabriele Romanato gabriele.roman...@gmail.com a écrit : You first declared a font-size on a type selector, p, with a pseudo-element, then you declared a class with another pseudo-element on the same element type The font-size is applied on the pseudo-element, not on the p. For both paragraphs the pseudo-element should compute the font-size based on the parent element. Yukka wrote: This looks definitely like a bug to me. The main practical issue with it is that we don’t know what really triggers it, so we can’t say for sure how to avoid or circumvent it. Definitely a bug. And IE 9 has the same issue. Surprisingly, IE 8 has it right (when substituting the CSS2.1 notation using a single column). And no, using the CSS2.1 notation does not make it work in IE 9 and 10… No idea what secret sauce the MSIE team has added in the mix, so I can't suggest any possible workaround. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
On 26.04.2013 05:00, Philippe Wittenbergh wrote: No idea what secret sauce the MSIE team has added in the mix, so I can't suggest any possible workaround. This IE bug makes me break the convention not to use fixed font-size on web pages, applying font-size in px on the generated content in IE9+ only - hacked in. Seems to work reasonably well. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
Georg wrote: This IE bug makes me break the convention not to use fixed font-size on web pages, applying font-size in px on the generated content in IE9+ only - hacked in. Seems to work reasonably well. Better than rem, Georg ? Having been forced to use rem for this fix, I am now considering adopting them more widely. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
On Fri, Apr 26, 2013 at 2:35 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Georg wrote: This IE bug makes me break the convention not to use fixed font-size on web pages, applying font-size in px on the generated content in IE9+ only - hacked in. Seems to work reasonably well. Better than rem, Georg ? Having been forced to use rem for this fix, I am now considering adopting them more widely. Philip Taylor Support isn't too bad for rem. What's best practice fall back for using rem? -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
On 26.04.2013 14:35, Philip TAYLOR wrote: Better than rem, Georg ? Having been forced to use rem for this fix, I am now considering adopting them more widely. Haven't bothered to test out what's best in bug-cases like this, only what works and seem to do no real harm. The rem unit do look better on paper though. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] font-sizing bug in generated content in IE 10 ?
Please take a look at :
http://hellenic-institute.rhul.ac.uk/research/Etheridge-development/Test/
(transcript below) and compare its appearance in IE 10
and another browser (I use Seamonkey; it will almost
certainly appear in Firefox as it does in Seamonkey,
as they use the same rendering engine).
If you use page zoom (Ctrl +) to make everything clearly
visible, you will see that in IE, the generated content
on line two is about one half of the generated content
on line one, whilst the generated content on line four is
exactly the same size as that on line three. Lines one
and two use em units for the generated content, lines
three and four use rem units. The only difference between
the first and second line of each pair is that the P element
is placed in a class, and the CSS rule applies both to the
classless and classed P elements.
It seems to me that IE may be incorrectly applying the font-size
attribute of the rule twice in the case of the classed P elements
(but not the content attribute) -- once for the P and once for
the class; what do others think ?
Philip Taylor
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
HTML
HEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
TITLEIE generated content test/TITLE
STYLE type=text/css
DIV.em P::before, DIV.em P.EOF::before
{font-size: 0.5em; content:em-units: }
DIV.rem P::before, DIV.rem P.EOF::before
{font-size: 0.5rem; content:rem-units: }
/STYLE
/HEAD
BODY
DIV class=em
PLine one/P
P class=EOFLine two/P
/DIV
DIV class=rem
PLine three/P
P class=EOFLine four/P
/DIV
/BODY
/HTML
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
You wrote: font-size: 0.5rem. Is it a typo? Anyway, I think it's somewhat
related to the cascade and inheritance behavior when applied to
pseudo-elements. You first declared a font-size on a type selector, p, with
a pseudo-element, then you declared a class with another pseudo-element on
the same element type (p). The point is that they're both Ps, so they
inherit from each other. This is a controverted question. I think this IE's
behavior **might** be correct.
On Thu, Apr 25, 2013 at 12:41 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote:
Please take a look at :
http://hellenic-institute.rhul.ac.uk/research/Etheridge-development/Test/
(transcript below) and compare its appearance in IE 10
and another browser (I use Seamonkey; it will almost
certainly appear in Firefox as it does in Seamonkey,
as they use the same rendering engine).
If you use page zoom (Ctrl +) to make everything clearly
visible, you will see that in IE, the generated content
on line two is about one half of the generated content
on line one, whilst the generated content on line four is
exactly the same size as that on line three. Lines one
and two use em units for the generated content, lines
three and four use rem units. The only difference between
the first and second line of each pair is that the P element
is placed in a class, and the CSS rule applies both to the
classless and classed P elements.
It seems to me that IE may be incorrectly applying the font-size
attribute of the rule twice in the case of the classed P elements
(but not the content attribute) -- once for the P and once for
the class; what do others think ?
Philip Taylor
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
HTML
HEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
TITLEIE generated content test/TITLE
STYLE type=text/css
DIV.em P::before, DIV.em P.EOF::before
{font-size: 0.5em; content:em-units: }
DIV.rem P::before, DIV.rem P.EOF::before
{font-size: 0.5rem; content:rem-units: }
/STYLE
/HEAD
BODY
DIV class=em
PLine one/P
P class=EOFLine two/P
/DIV
DIV class=rem
PLine three/P
P class=EOFLine four/P
/DIV
/BODY
/HTML
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Gabriele Romanato
Referente IWA ITALY - Regione Abruzzo
International Webmasters Association Italia
http://www.iwa.it | e-mail: abru...@iwa.it
Professionista Web - Legge 4/2013
http://gabrieleromanato.com/
http://gabrieleromanato.name/ (English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
2013-04-25 18:17, Gabriele Romanato wrote: You wrote: font-size: 0.5rem. Is it a typo? I’m pretty sure Philip intentionally tested both with em and with rem. The bug manifests itself when em is used, not when rem is used, suggesting that IE 10 indeed calculates em wrong, when there is a pseudo-element with a class and font-size is set on it using the em unit. Anyway, I think it's somewhat related to the cascade and inheritance behavior when applied to pseudo-elements. There is no inheritance involved when a property is set on an element. You first declared a font-size on a type selector, p, with a pseudo-element, then you declared a class with another pseudo-element on the same element type (p). The point is that they're both Ps, so they inherit from each other. No, they don’t. Elements only inherit from their parents. And selectors are not elements. I think this IE's behavior **might** be correct. This looks definitely like a bug to me. The main practical issue with it is that we don’t know what really triggers it, so we can’t say for sure how to avoid or circumvent it. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
