CSS3 Transform Property Working Differently in Internet Explorer

CSS3 transform property working differently in Internet Explorer

Easier Approach

Instead of positioning from the top and left, position instead from the bottom and right. After you've done this, simply change your -50% translations to positive 50%. This will remove the overflow e.g.

.center-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

You can see these changes in action here: http://jsfiddle.net/bd17gsss/

It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.

Original Answer

There appears to be a layout bug with position: absolute in this particular demo. It's behaving similar to position: relative when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.

For now, you could switch your position value from absolute to fixed, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modal style class that will center anything it is applied to.

The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/

webkit-transform not working in Internet Explorer

Have you tried -ms-transform:rotateZ(10deg);?

As -webkitis also a vendor specific prefix, you'll have to add those for non-webkit browsers, too.

(like -ms, -moz, -o)

Check out this CSS3 3D Transforms Tutorial for more info:
http://www.pageresource.com/css3/3d-transforms-tutorial/

CSS rotate property in IE

To rotate by 45 degrees in IE, you need the following code in your stylesheet:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.

The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).

Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.

All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

Edit

Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.

Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:

-sand-transform: rotate(40deg);

Much easier than the traditional filter style you'd normally need to use in IE.

Edit

Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform and the old style IE -ms-filter. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter style by using the Sandpaper polyfill mentioned above.

CSS transform rotate not working in internet explorer 11

I can't get your minimalist example working in any browser. d3 was having trouble interpolating the transform string. Instead, if I use a .tween and do the interpolation manually it seems to work in IE11 (I tried chrome, IE11 and Edge):

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <script src="https://d3js.org/d3.v5.min.js"></script>    <style>      span {display: inline-block;}    </style>  </head>   <body>    <script>      var letters1 = d3.select("body")        .selectAll("span.working")        .data("Hello stackoverflow!")        .enter()        .append("span")        .attr("class", "working");           letters1        .style("transform", "rotate(0deg)scale(0.01)")        .text(function(d){return d;})        .transition()        .duration(2000)        .tween("transform", function() {          var node = d3.select(this),               s = d3.interpolateNumber(0.01, 1),              r = d3.interpolateNumber(0, 720);          return function(t) {            node.style("transform", "rotate(" + r(t) + "deg)scale(" + s(t) + ")");          };        });          </script>  </body></html>

---

Related Topics