IE9: Why setting "-ms-transform" works from css, but not with jquery.css()
Solution 1
The dash ('-') in the property is invalid for use in scripting. You should use msTransform
instead.
By the way: though a number of browsers do understand and parse css like style['background-color'] from scripting, afaik Firefox doesn't. Furthermore I think JQuery .css(...)
transforms properties like 'background-color'
to their DOM-scripting equivalent ('backgroundColor'
in this case) before parsing it.
To be complete: JQuery.css
indeed transforms dashed properties to camelCase. Here's a representation of the JQuery.css
-internals with the string '-ms-transform'
:
var fcamelCase = function( all, letter ) {
return letter.toUpperCase();
};
var rdashAlpha = /-([a-z])/ig;
// JQuery.css does a replace operation with these variables
// on the raw property string:
alert('-ms-transform'.replace(rdashAlpha,fcamelCase)); //=> msTransform
So that's why $("div").css("-ms-transform","rotate(30deg)")
doesn't work in IE9. IE9 expects: msTransform
.
Why then, does $("div").css("-moz-transform", "rotate(-90deg)")
work in Firefox? Because Mozilla evidently decided to use complete CamelCase for their -moz-[properties], so the MozTransform
scripting style property is valid (and, by the way, mozTransform
isn't ... really).
It's all to the browser then, nothing new under the digital sun.
Solution 2
Not sure why As KooiInc says, dashes in style
property names are invalid in DOM scripting.
You can fix it by using object notation and passing in the name in camel case instead of hyphenated, like this:
$('div').css({ msTransform: 'rotate(30deg)' });
Solution 3
jQuery 1.8 brings automatic vendor prefix support, so this now works for all browsers:
$("div").css("transform","rotate(30deg)");
Related videos on Youtube
Comments
-
grizwako almost 2 years
This works
div{ -ms-transform: rotate(30deg); }
And following does not
$("div").css("-ms-transform","rotate(30deg)");
Any ideas why, and how to fix it?
Same thing works good on all other browsers, but not on IE. Ofcourse, only IE9 supports it. Older versions dont. -
Rory McCrossan about 13 yearsIs this IE only as
$("P").css("-moz-transform", "rotate(-90deg)");
works fine in FF4? -
BoltClock about 13 years@Rory McCrossan:
$('div').css('-moz-box-shadow', '3px 3px 3px #000');
doesn't work for me (I know Fx 4 supports the standard but the prefixed property still works in CSS). -
KooiInc about 13 yearsI think so. And I think it's only the first dash that's illegal. So $('div').css({ 'ms-transform': 'rotate(30deg)' }); does work in IE9. See jsfiddle.net/KEEYp/1
-
BoltClock about 13 yearsLooks like this question just got tweeted by @StackExchange - enjoy your free upvotes!
-
KooiInc about 13 yearsThanks for telling BoltClock. I thought my answer was not quite complete, so I did some more research to complete it ;)
-
ChrisW almost 11 yearsYour link which says "See also..." goes nowhere. What were you trying to link to?
-
KooiInc about 10 years@ChrisW: it was a link to MSDN, but they removed the page. I removed the link.