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

by

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.

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. How to hide css and js version details from weppalyzer in PHP
  3. How to do this mouse over effect in jquery?
  4. How to make page loaders/animations/transitions
  5. Download the text over image using jquery
  6. dynamic rectangular or square div of any size which can be fitted into a fixed size div [closed]
  7. toggle show/hide div with button?
  8. Replacing css file on the fly (and apply the new style to the page)
  9. Dynamically loading css stylesheet doesn’t work on IE
  10. How to silently hide “Image not found” icon when src source image is not found
  11. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  12. Use images like checkboxes
  13. Setting CSS value limits of the window scrolling animation
  14. Stop fixed position at footer
  15. How to add anything in through jquery/javascript?
  16. How can I generate the opposite color according to current color?
  17. scrollTop animation without jquery [duplicate]
  18. How to swipe top down JQuery mobile
  19. Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x – y), where y is unknown
  20. Jquery: How to check if the element has certain css class/style
  21. jQuery: Slide left and slide right
  22. TypeError: $(…).modal is not a function with bootstrap Modal
  23. jQuery, image changing on hover [duplicate]
  24. How to increase width of underline for the multiline text when on hover
  25. Dynamically expand height of input type “text” based on number of characters typed into field
  26. How can I make an image carousel with only CSS?
  27. How to use pagination on HTML tables?
  28. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment