IE9: Why Setting "-Ms-Transform" Works from CSS, But Not with Jquery.Css()

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

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.

CSS3 2D Transforms not working on IE9 if set by jQuery

I don't know what is causing the problem. However, have you tried with cssText:

$('#example').css('cssText','-ms-transform: translate(200%) rotate(45deg) translate(-200%)');

Sometimes this would seem to work.

EDIT: I believe the problem is related to this jQuery issue:

http://bugs.jquery.com/ticket/8346

Why can't I set -ms-transform with jQuery?

Actually, you can! :-)

$('#divid').css({ msTransform: 'rotate(-90deg)' }); // for IE9

Very relevant IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

Is it a IE9's bug?

It's not a bug in IE, the dash notation is invalid when used in a script. You can use the camelCase equivalent and object notation when setting the property using jQuery.

Edit: Found another SO question on this subject - IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

$('div').css({ msTransform: 'scale(1)' });

How to apply !important using .css()?

Most of these answers are now outdated, IE7 support is not an issue.

The best way to do this that supports IE11+ and all modern browsers is:

const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');

---

Or if you want, you can create a small jQuery plugin that does this.
This plugin closely matches jQuery's own css() method in the parameters it supports:

/**
 * Sets a CSS style on the selected element(s) with !important priority.
 * This supports camelCased CSS style property names and calling with an object 
 * like the jQuery `css()` method. 
 * Unlike jQuery's css() this does NOT work as a getter.
 * 
 * @param {string|Object<string, string>} name
 * @param {string|undefined} value
 */   
jQuery.fn.cssImportant = function(name, value) {
  const $this = this;
  const applyStyles = (n, v) => {
    // Convert style name from camelCase to dashed-case.
    const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
      return m1 + "-" + upper.toLowerCase() + m2;
    }); 
    // Loop over each element in the selector and set the styles.
    $this.each(function(){
      this.style.setProperty(dashedName, v, 'important');
    });
  };
  // If called with the first parameter that is an object,
  // Loop over the entries in the object and apply those styles. 
  if(jQuery.isPlainObject(name)){
    for(const [n, v] of Object.entries(name)){
       applyStyles(n, v);
    }
  } else {
    // Otherwise called with style name and value.
    applyStyles(name, value);
  }
  // This is required for making jQuery plugin calls chainable.
  return $this;
};

// Call the new plugin:
$('#elem').cssImportant('height', '100px');

// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});

// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');

Example jsfiddle here.

Animate element transform rotate

As far as I know, basic animates can't animate non-numeric CSS properties.

I believe you could get this done using a step function and the appropriate css3 transform for the users browser. CSS3 transform is a bit tricky to cover all your browsers in (IE6 you need to use the Matrix filter, for instance).

EDIT: here's an example that works in webkit browsers (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

If you wanted to support IE9 only, you could use transform instead of -webkit-transform, or -moz-transform would support FireFox.

The trick used is to animate a CSS property we don't care about (text-indent) and then use its value in a step function to do the rotation:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

CSS perspective not working in Internet Explorer 10 or Firefox

Unit of length

IE and Firefox require a unit of length on perspective values (px, em).

   -moz-perspective: 800px;
        perspective: 800px;

For Chrome and Safari, the unit of length is optional when using the -webkit prefix.

-webkit-perspective: 800;    /* This works with or without the px unit */

W3C standards

It's safer to add a unit of length to all perspective values. It's more consistent with the W3C standard. It's the one approach that all browsers support. And once Chrome and Safari start supporting perspective without a prefix, it's possible that they'll require a unit of length (for consistency with W3C standards and with other browsers).

-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;

Note: The current info on w3schools.com is outdated. There's no mention of support for IE10 or Firefox, and their examples do not have a unit of length. The more-recent examples on developer.mozilla.org include a unit of length, consistent with the W3C standards.

---

Related Topics