CODEWITHSUNDEEP
javascriptcssd3.jsinternet-explorer-11
ee2Dev
ee2Dev

Reputation: 1998

CSS transform rotate not working in internet explorer 11

I have written an application which animates text elements (individual letters are each inside a span element).

I am seeing the following strange effect in Internet Explorer 11 (In Chrome everything works fine):

Scenario 1:

letters
   .style("-webkit-transform", "rotate(-0deg) scale(.001)")
   .style("-ms-transform", "rotate(-0deg) scale(.001)")
   .style("-mozilla-transform", "rotate(-0deg) scale(.001)")
   .style("transform", "rotate(-0deg) scale(.001)")
   .transition()
   .style("-webkit-transform", "rotate(-720deg) scale(1)"); 
   .style("-ms-transform", "rotate(-720deg) scale(1)"); 
   .style("-mozilla-transform", "rotate(-720deg) scale(1)")
   .style("transform", "rotate(-720deg) scale(1)");

My intention: to display letters almost invisible (scale.001) and transition them to grow to the regular size while rotating them twice.

My approach: seems to my knowledge to be the correct way. (You see here the d3.js version of the transition, which should not matter to my understanding). the transform CSS style is first prefixed for some browsers which don't support the regular transform property. After these browsers implement the desired property it can and should be invoked by the regular property (without prefix). For that reason the regular property should be called last to ensure proper behaviour.

Result:
This works fine in Chrome, in IE 11 however, the scaling transition works but there is no rotation.

Scenario 2:

(just using the prefix versions of transform, dropping the regular bare-bone transform)

letters
   .style("-webkit-transform", "rotate(-0deg) scale(.001)")
   .style("-ms-transform", "rotate(-0deg) scale(.001)")
   .style("-mozilla-transform", "rotate(-0deg) scale(.001)")
   .transition()
   .style("-webkit-transform", "rotate(-720deg) scale(1)"); 
   .style("-ms-transform", "rotate(-720deg) scale(1)"); 
   .style("-mozilla-transform", "rotate(-720deg) scale(1)");

This should not be the right approach since IE 11 already implemented transform. However, this produces the correct result (for IE 11).

Scenario 3:

I just open the website: https://css-tricks.com/almanac/properties/t/transform/ in Internet Explorer 11 and there the "regular" CSS transform rotations are displayed as desired. There the examples are embedded in Codepen.

I have the following questions:

Why does scenario 1 not work in IE 11 ? (have also tried various changes with no effect, such as just rotation no scaling, etc.)?

Scenario 2 works, but doesn't seem to be the way to go, since I have to omit the regular barebone transform property. Am I right not to pursuit that path?

In scenario 3 the regular transform works fine, the only difference seems to be, it is embedded in Codepen. What is the reason for this - does it help us finding a solution to question 1 (which should run on a web server not in codepen?

p.s. in stackoverflow I found this related question (Rotate and scale does not work in IE11), but it doesn't help.

Update May 30th

<!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.notWorking")
        .data("Hello stackoverflow!")
        .enter()
        .append("span")
        .attr("class", "notWorking");
     
      //this is desirable but doesn't work in IE11:
      // transform rotate doesn>'t work, but e.g. transform scale does
      letters1
        .style("-ms-transform", "rotate(0deg)")
        .style("transform", "rotate(0deg)")
        //.style("transform", "scale(0.01)")
        .text(function(d){return d;})
        .transition()
        .style("-ms-transform", "rotate(720deg)")
        .style("transform", "rotate(720deg)");
        //.style("transform", "scale(1)");
       
      var letters2 = d3.select("body")
        .selectAll("span.working")
        .data("Hello stackoverflow!")
        .enter()
        .append("span")
        .attr("class", "working");
     
      //this is not desirable (since the regular transform can't be used) but works in IE11:
      letters2
        .style("-ms-transform", "rotate(0deg)")
        .text(function(d){return d;})
        .transition()
        .style("-ms-transform", "rotate(720deg)");
    </script>
  </body>
</html>
 

Any help would be greatly appreciated!

Upvotes: 3

Views: 3431

Answers (1)

Mark
Mark

Reputation: 108522

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>

Upvotes: 2

Related Questions