3

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!

Community
  • 1
  • 1
ee2Dev
  • 1,938
  • 20
  • 29
  • 1
    I saw "internet explorer" and I feel bad for you... – Radmation May 29 '18 at 21:35
  • You should take a look at http://shouldiprefix.com/#transforms. It's been quite a while since those vendor prefixes have been needed for `transform`. Just a hint if you want to write less code. – Heretic Monkey May 29 '18 at 21:36
  • @MikeMcCaughan: Yes, according to the docs, IE should be fine with transform for a long time now. However, I write above, it doesn't work:( – ee2Dev May 29 '18 at 21:40
  • You mention d3.js, which is typically used for SVG. Are the elements you're transforming within an SVG element? That would make a pretty big difference... [SVG - IE11-10 Transform rotate doesn't appear to be working](https://stackoverflow.com/q/43470926) – Heretic Monkey May 29 '18 at 21:45
  • @MikeMcCaughan: No, The elements, I am transforming are individual letters (text) within within a span element. No SVG involved. – ee2Dev May 29 '18 at 21:48
  • 1
    Okay. It's best if you can prepare a snippet of code that reproduces the problem. In other words, a [mcve]. You can use Stack Snippets (icon in the editor looks like `<>` in a page), which works a bit like jsfiddle.net, CodePen, etc.. – Heretic Monkey May 29 '18 at 21:49
  • 1
    I just tried to reproduce your problem. I couldn't get any browser to apply the transforms with just a letter in span like this `A` [See here as to why](https://stackoverflow.com/a/24962108/16363). With a `div` though, IE11 did the same thing as chrome. I'm with @MikeMcCaughan, going to need to see some reproducible code. – Mark May 29 '18 at 22:34
  • ok, thanks for the feedback so far- I will try to put up a minimal example. p.s. [here](https://ee2dev.github.io/startext/) is what I try to do, but I will try to separate a minimal example. – ee2Dev May 29 '18 at 22:36
  • @mark: I added a complete but minimal example above where I experience the problem with IE 11. The code I chose uses d3.js, but that should be unrelated, it should boil down to the css transform rotate style property. – ee2Dev May 30 '18 at 08:51
  • _“In scenario 3 the regular transform works fine, the only difference seems to be, it is embedded in Codepen.”_ - I think you have overlooked a major difference there … in the codepen, the properties are applied via a class from the stylesheet, whereas you are trying to set them all individually, bit by bit, via JavaScript - which, since the values seem to be absolutely static, you should rather not be doing in the first place. Try and put all that into your stylesheet, and then apply it by dynamically adding a class that triggers this to the element(s), and see if that makes a difference. – CBroe May 30 '18 at 11:51
  • @CBroe : it is true, the style I transition from and I transition to is static. Still I want to do the style change in JavaScript/d3.js since I dynamically set the duration and the delay of the transition based on the data (not shown here). I know how to do that in d3.js but don’t know how to do that in css. – ee2Dev May 30 '18 at 14:03

1 Answers1

2

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>
Mark
  • 106,305
  • 20
  • 172
  • 230
  • Great! I just tested on IE 11 and it works fine, thanks so much! Haven’t thought of the interpolation since it works on my IE 11 with -ms-transform. Strange you cannot reproduce... I have gladly accepted this answer. – ee2Dev May 30 '18 at 12:16