Internet Explorer 11 Wobbly CSS3 Animation

Internet Explorer 11 wobbly CSS3 animation

For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.

.spinner {
display:block;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
    background-size:100%;

    -webkit-animation: application-loading-rotate 1s;
    animation: application-loading-rotate 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes application-loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes application-loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

See:
http://jsfiddle.net/eQegA/26/

Wobbly CSS Animation with Border-Radius in Internet Explorer

It looks like it is the transparent outline interfering with the edge of the object. The outline is always a square (as you can see by using outline: 1px solid blue; for example). I can only assume that using a 1px transparent outline outline over an interpolated circular shape causes the rendering issue.

Replacing outline:1px solid transparent; with outline:1px solid rgba(255, 255, 255, 0); or outline:0 solid transparent; fixes Edge and IE11 for me. I don't have Firefox so I cannot test if this also removed the jagged edges still.

@keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-webkit-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-moz-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-ms-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-o-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}#spinme{    display:inline-block;    margin:0.2rem;    width:0.8rem;    height:0.8rem;    border:0.2rem solid black;    border-radius:0;    outline:0 solid transparent;    transform:rotateZ(0deg);    animation: spin infinite 4s;    -webkit-animation: spin infinite 4s;    -moz-animation: spin infinite 4s;    -ms-animation: spin infinite 4s;    -o-animation: spin infinite 4s;}

<div id="spinme"></div>

Internet Explorer CSS rotation wobble

In case anyone is wondering, here's how I managed to work around this: The SVG's transform-origin should be set to the circle's radius (in this case 250px) in all dimensions(x, y and z).

svg{
  /* other styles go here */
  transform-origin: 250px 250px 250px;
}

Sprite animation wobbly / jumping in IE11

On IE11, Windows 7, this thing is jumping very slightly up and down. In FF or Chrome it is displaying correctly.

My guess is that the issue is caused by the way different browsers handle the rounding of floating point numbers. IE11 (as well as Edge) truncates after the second decimal place which makes the positioning sometimes imprecise. There have been lot of complaints about this behaviour as for example the building of a layout grid (columns) with percentage values requires some additional hacks to add the columns' width to 100%.

In Firefox (53) and Chrome (57) the number is rounded to at least the fourth decimal. That makes a visible difference in your example. If we have 29 steps, each step moves the background-image by 3.448...%, so after 6 steps the value should be at 20.6896...%. I took this specific step as here we get the biggest difference between the actual value and the visible value shown in IE11 (20.68%). This results in an inaccuracy of ~1.67px. On average we have an inaccuracy of 0.86px in this example.

The reason why it does not flicker in the ninja example is that the inaccuracy is lower (due to a smaller image height of 752px compared to your 17280px; note that the image's height gets multiplied by the percentage value so that a higher pixel value has a greater impact). The maximum difference between the actual value and the rendered value is only 0.0752px and on average we only have an inaccuracy of 0.0376px in the ninja example.

How to solve the issue

It's really as simple as not to rely on floating point numbers in this scenario. We move the background-image by 576px for 30 steps:

.test {  width: 910px;  height: 576px;  background:  url('https://i.stack.imgur.com/Tsw6G.png') no-repeat 0 0%;  animation: sprite 1s steps(30) infinite;}
@keyframes sprite {  from { background-position: 0 0px; }  to { background-position: 0 -17280px; }}

<div class="test"></div>

Internet Explorer 11 Not allowing calculation within @keyframe

I got it to work in IE11 (on W7 x64) with your jsfiddle by using the answer given at IE 10 + 11: CSS transitions with calc() do not work:

@keyframes slidein {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(-100%) translateX(250px); 
    }
}

CSS animation wobble

Try adding background-position:center; to you wheel_spin classes

Nested CSS3 rotation animation not working in IE11

I've found a workaround for this. Delaying the animations until the page has loaded worked some of the time. Adding a slight delay seems to work consistently. I also removed the vendor specific markup. That is unnecessary for all the browsers that I'm targeting.

.carrierLoading {
  ...
  /* animation: ccw 10s linear infinite; */
}

.carrierLogos {
  /* animation: cw 10s linear infinite;*/
}

$(window).load(function () {
    setTimeout(function () {
        $('.carrierLoading').css('animation', 'ccw 10s linear infinite');
        $('.carrierLogos').css('animation', 'cw 10s linear infinite');
    },1000);
});

I'm still interested in an answer that doesn't rely on timing to work properly.

---

Related Topics