-ms-transform not working with IE 11

Question

Adding -ms-transform:rotate(90deg) dynamically using jQuery to the element. But, its not working in IE 11. However, -webkit-transform:rotate(90deg) is working in Chrome.

No transformation is happening on page.

Added meta :

<meta http-equiv=X-UA-Compatible content="IE=9;IE=10;IE=11;IE=Edge,chrome=1">

which version of IE does it not work in? I believe that should work on IE9 or later. If you're using IE8, there's an answer here which might help: http://stackoverflow.com/questions/11900870/rotating-a-text-to-270-degrees-in-ie8 — Flynn1179, May 19 '16 at 06:32
According to IE css transformations are supported after IE9. I'm using IE11. — Atul Sharma, May 19 '16 at 06:34
Do you also have the `transform` property? Prefixes are phased out when the browser gets full support of the feature. — JJJ, May 19 '16 at 06:37
@thepio 1.7.2. Jquery is doing its wrok, and code is working fine on mozilla and chrome. — Atul Sharma, May 19 '16 at 06:54
Can you try to bump up your jQuery version to atleas 2.x.x and see if it helps. — thepio, May 19 '16 at 06:58
@thepio I will try.. But, on adding `-ms-transform:rotate(90deg)` manually to the element is also not working. So, i think there is some issue with IE itself. — Atul Sharma, May 19 '16 at 07:00
You do not need the `-ms-` prefix for IE11. Just use `transform: rotate(90deg)` — thepio, May 19 '16 at 07:03
@thepio check the image. IE seems to be avoiding `transfrom` and using `-ms-transfrom` — Atul Sharma, May 19 '16 at 07:05
But how about manually adding **ONLY** the transform without the prefix? — thepio, May 19 '16 at 07:08
@thepio, yeah cascading effect probably the real cause here. I'm starting to think OP didn't try just the one. — Chris, May 19 '16 at 07:10
@Chris yeah it's hard to tell what really has been tried out and what has not. — thepio, May 19 '16 at 07:11
@thepio Pretty interesting, this works. Then how will one can use this with JS — Atul Sharma, May 19 '16 at 07:11
@atulquest93, probably just `$("#yourElement").css("transform", "rotate(90deg)");` — Chris, May 19 '16 at 07:13

thepio · Accepted Answer · 2016-05-19T07:14:14.063

Based on the comments on your question you could then check the IE version with something like this:

http://jsfiddle.net/jquerybyexample/gk7xA/

And insert the transform property with or without the prefix -ms- according to this checkup. The example above is just pure JavaScript because:

The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.

EDIT:

And actually you said you are using jQuery 1.7.2 so you could use the jQuery method to detect the browser and version.

Documentation: http://api.jquery.com/jquery.browser/

-ms-transform not working with IE 11

1 Answers1