CODEWITHSUNDEEP
javascripthtmlcssmicrosoft-edge
Shlx
Shlx

Reputation: 193

Why does .css('fontSize') produce different results in Edge?

Consider this code (also in a fiddle):

document.getElementById("span").innerHTML += $('#input').css('fontSize');
span input {
  font-size: inherit;
}

input {
  font-size: 15px;
}
<span id="span" style="font-size: 30px;">
  <input id="input"/>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

In Chrome and Firefox, the .css('fontSize') will return 30px, in Edge and IE it's 15px. Why does it do that? The DOM Explorer in Edge even shows the 15px in strikethrough, and therefore should take the inherited 30px as the fontSize:

And the input is rendered with a 30px font, so IE/Edge is picking it up for rendering purposes.

Upvotes: 15

Views: 1358

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074385

Update: The bug below is now fixed; FremyCompany says he/she is a program manager from the Edge team and the fix will reach customers in early 2017.

It looks very much like an IE and Edge bug. Not having found it, I reported it.

Here's an update to the snippet that sees what IE/Edge is telling jQuery via getComputedStyle or currentStyle:

var input = $("#input");
console.log("jQuery: " + input.css('fontSize'));
if (window.getComputedStyle) {
  console.log("getComputedStyle: " + getComputedStyle(input[0]).fontSize);
}
if (input[0].currentStyle) {
  console.log("currentStyle: " + input[0].currentStyle.fontSize);
}
span input {
  font-size: inherit;
}

input {
  font-size: 15px;
}
<span id="span" style="font-size: 30px;">
  <input id="input"/>
  <span id="size"></span>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

For me, IE11 returns 15px from both getComputedStyle and the Microsoft-specific currentStyle property (it's reassuring that they do at least say the same thing):

enter image description here

So it's not a jQuery bug, it's a Microsoft bug when reporting the size via JavaScript (looks like when inherit is the governing rule), even though it's rendering it correctly.

I tried to find a way to make this a grey area, but couldn't think of anything. For instance, according to the spec, having an input inside a span is entirely valid.

Upvotes: 9

Megajin
Megajin

Reputation: 2768

Before I get to the real answer I'd like to dig a little into details.

What is this piece of code doing?

.css();

In the jQuery Docs they tell us:

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Furthermore:

The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (...)

So what does computed mean?

MDN Docs:

the computed value of a CSS property is computed from the specified value by:

  • Handling the special values inherit and initial, and
  • Doing the computation needed to reach the value described in the "Computed value" line in the property's summary

Ok, now that part is clear too. Let's get to the real answer:

According to Specifics on CSS Specificity there are css-rules with more 'weight' than others have on an HTML element.

Here is the actual order:

  1. Style Attribute
  2. ID
  3. Class, Pseudo Class Attributes
  4. Element

According to that rules your input should've taken the inherited 30px from the Style attribute.

So what is happening in IE11/Edge?

IE11 and Edge are both computing the CSS Rules wrong. If you change your CSS into only this:

span input {
  font-size: inherit;
}

It is starting to work. With the information gathered I am assuming that the JavaScript - Engine of both is computing the real CSS value instead of following the CSS rules order.

I've tried to either change the ID and putting a class on the input but still no luck.

I can remember that IE11 and Edge had some problems with inherited CSS and pseudo classes, maybe it is related to that?

Regards, Megajin

Upvotes: 0

Related Questions