IE9: Why setting “-ms-transform” works from css, but not with jquery.css()

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.

Answers:

Answer

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.

Answer

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)' });

jsFiddle preview

Answer

jQuery 1.8 brings automatic vendor prefix support, so this now works for all browsers:

$("div").css("transform","rotate(30deg)");

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.