Develop Reference

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.

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):
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.

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:
Style Attribute
ID
Class, Pseudo Class Attributes
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

Rotate(90deg) not being applied using .transform in Chrome 37

I have some code that, until recently, worked on all browsers supporting CSS transforms. It broke in the newest Chrome (37). I found the issue. The transform from the computed style of an element is not accepted by other elements.
HTML
<div class="one">One</div>
<div class="two">Two</div>
<span></span>
CSS
div {
width: 100px;
height: 100px
}
.one {
background-color: red;
transform: rotate(90deg);
}
.two {
background-color: blue
}
Javascript
var oneStyle = window.getComputedStyle(document.querySelector('.one'));
var oneTransform = oneStyle.transform;
document.querySelector('span').innerHTML = 'Tranform value is: ' + oneTransform;
var twoStyle = document.querySelector('.two').style;
twoStyle.transform = oneTransform;
Here is a Fiddle: http://jsfiddle.net/acbabis/0v8v2xd7/
The issue is that the second (blue) element does not rotate the same as the first (red) element is even though I told it to in the javascript.
This looks like a bug to me. Is it?
EDIT: My actual code was working in every browser but the newest Chrome, but it appears my sample code breaks in all browsers. I'd still like to understand why the above problem occurs.
EDIT 2: Got it to break in only Chrome 37 again. My guess is that it doesn't like the scientific notation; but then why would the computed style have it?

This is a fairly common problem, similar errors happen with older versions of Chrome and other vendors as well.
The usual fix is, as Hashem mentioned partly, to either change the rotation to something like 89.9deg or force GPU rendering by doing something like translateZ(1px) in addition to the rotation. Demo. In the future we can likely force this as well by using the will-change property
This is because browsers have trouble rendering certain things and rendering elements rotated exactly 90 degrees is one of those things. Sometimes they need a little help :)

jQuery animate background position won't change but css does

This is the stranges thing, this works:
$('#box').css({"backgroundPosition": "0px 250px"});
But this does not work, it just doesn't change position:
$('#box').animate({"backgroundPosition": "0px 250px"});
Tested in FF and chrome using jQuery 1.5.2 and 1.6.1.
FF reports "Warning: Error in parsing value for 'background-position'. Declaration dropped."
My CSS is:
#box { padding-left: 30px; background: url(../img/arrow.gif) 0px 30px no-repeat; }
Any ideas as to why animate won't work?
jsfiddle at http://jsfiddle.net/wyhqu/ try changing animate to css and you will see it works

I'm pretty sure you can't do this.
The animate documentation says this:
most properties that are non-numeric cannot be animated using basic
jQuery functionality
While you are passing 2 numbers, you could pass "center" or some other non-numeric value.
There does appear to be a plugin to allow you to do it:
http://plugins.jquery.com/project/backgroundPosition-Effect
I haven't used it though so I have no idea how good it is.

Try this:
$('#box').animate({"background-position": "0px 250px"});
In the CSS case, it's relying on the browser to parse "backgroundPosition", which it does just fine. In the animate case, jQuery has to do the parsing. Maybe the developers only added the hyphenated case.

Detect :first-child support

How to detect, using JavaScript, if the browser supports the CSS :first-child selector?

You could just use that :first-child rule to set some specific value, and then get the computed style in Javascript to see if the :first-child rule is applied, e.g.
<style>
#foo { width: 200px; }
#foo:first-child { width: 400px; }
</style>
<span><span id="foo"></span></span>
<script>
if ($('#foo').width() < 400)
alert('first-child not supported.');
</script>
(This is not tested. I have no IE 6.)

I don't think there is a jQuery function to find out support for this. I expect if it does exist, it is going to be quite complicated. Are you really sure you need this? Care to share why?
If you can use jQuery anyway, why not add a jQuery statement to assign the class/property/whatever to the desired element, instead of relying on CSS?
As a "manual" answer, looking at the quirksmode.org compatibility table, the selector is fully supported in all modern browsers except the IE family which seems to have problems even in IE8.

Disable grey border on anchor (<a>) elements on focus

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.

Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx

It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i

Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!

For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/

Does this not work?
a
{
border: 0;
}

a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.

a {
outline: 0 none !important;
border: none;
}