Text appears reversed in IE 10

[MrSaints]

Some of the animations are bugged on Internet Explorer 10 (especially ones that requires rotations - refer to attached screenshot). The text is reversed when animating in.

The fade animation appears to be working fine.

[ruudbwai]

anyone resolved this issue?

[eku1s]

I get this issue as well.

[ninadingole]

Same with me my site uses a this plugin in jumbotron of bootstrap and the text are reversed please solve the issue

[ajaypatelaj]

Same here in IE11

[featured14]

The issue is with the backface-visibility: hidden
I made some adjustments to the css. Please note, I use Scss and only the "flipUp" animation ( made a slimmer version of the plugin to fit my needs)
The animation is not as smooth but is consistent over IE
Here is a codepen: http://codepen.io/bogdandin/full/mJIxA/

.rotating{
  display: inline-block;
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0) rotateZ(0);
  transition: 0.5s;
  -webkit-transform-origin-x: 50%;
  width: 100%;
    &.flip{
      position: relative;
      .front{
        z-index: 1;
      }
      .back{
        z-index: 2;
        display: block;
        opacity: 1;
        transform: rotateY(180deg) translate3d(0,0,0);
      }
      &.up{
        .back{
          transform: rotateX(180deg) translate3d(0,0,0);
        }
      }
    }
    .front, .back{
      left: 0;
      top: 0;
      //backface-visibility: hidden;
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
    }
    .front{
      position: absolute;
      display: inline-block;
      transform: translate3d(0,0,1px);
      display: none;
      opacity: 1;
    }
    .back{
      display: block;
      opacity: 0;
    }
}

[Strutsagget]

Thx for fix but it makes safari reversed instead :(

[MrSaints]

@Strutsagget I've made a similar plugin called Morphext if you want to achieve a similar effect, but without the compatibility issues that this one has (at least not that I know of). It has quite a few extra stuff and I'm actively maintaining it.

[evolross]

Another workaround is to just test for IE in JavaScript and set the animation to fade or dissolve for IE. This code works all the way up to IE11.

//  Check if this is IE and change the text rotation animation to dissolve
var textAnimation = "flipUp";

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

// If Internet Explorer
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
    textAnimation = "dissolve";
}

//  Setup rotating text 
$(".rotate1").textrotator({
    animation: textAnimation,
    separator: ",",
    speed: 2500
});

Source: http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery

EDIT - It looks like there's some issues with the above code on IE11, here's another post on a more robust IE detection: http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery/21712356#21712356

[ghost]

Any news from the author? I'd like the issue to be fixed please.

[MrSaints]

No it's not @renoovodesign, but you can check the other messages in this thread for solutions / alternatives.