Removing class does not stop keyframe animation in IE11

Question

The snippet below shows a simplified example of an issue I have found with css animations in Internet Explorer 11.

The spin button adds the '.spin' class to the div, which should change the banner's colour and start it spinning.
The stop button removes the '.spin' class from the div, which means it should revert to it's original colours and stop spinning.

In IE11 step 2 doesn't work - it changes the colours but does not stop the animation. Curiously if you try this with the developer tools running it works as expected.

Am I doing something wrong here or is this a known bug? I've been unable to find any reference to it although my google-fu might be lacking.

var banner = document.getElementById('banner');
var spinButton = document.getElementById("spin-button");
var stopButton = document.getElementById("stop-button");

spinButton.addEventListener("click", function(){
  banner.classList.add("spin");
})

stopButton.addEventListener("click", function(){
  banner.classList.remove("spin");
})

.spin {
  background: #FF0000;
  color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div>
  <div id="banner">
    <p>
      Hello World
    </p>
  </div>
  <button id="spin-button">Spin</button>
  <button id="stop-button">Stop</button>
</div>

Sounds like classic IE where you will have to do something else to get it to stop. Try adding some random class and see if it will cause it to stop. Or read the height or something that causes you to access the element's css. Just a great redraw error — epascarello, Nov 19 '19 at 14:58
thanks for the pointer @epascarello - just adding a class or reading a property didn't quite do the trick, but following the advice [in this answer](https://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac/8840703#8840703) forces a redraw. I'll edit the q and give you some internet points if you want to stick it as an answer — Slappywag, Nov 19 '19 at 15:17

score 0 · Answer 1 · answered Nov 19 '19 at 15:17

I made a test with IE 11.1.18362.0 version. In my test, I found that issue is producible when trying to run the sample in StackOverflow code snippet. I try to run the code from HTML file and found that your code is working fine. It is working even when console is not opened.

Tested code:

<!doctype html>
<html>
<head>
<style>
.spin {
  background: #FF0000;
  color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

</head>
<body>
<div>
  <div id="banner">
    <p>
      Hello World
    </p>
  </div>
  <button id="spin-button">Spin</button>
  <button id="stop-button">Stop</button>
</div>
<script>
var banner = document.getElementById('banner');
var spinButton = document.getElementById("spin-button");
var stopButton = document.getElementById("stop-button");

spinButton.addEventListener("click", function(){
  banner.classList.add("spin");
})

stopButton.addEventListener("click", function(){
  banner.classList.remove("spin");
})
</script>
</body>
</html>

Output in IE 11:

I suggest you to try to run the above code sample using HTML file to check whether it helps to make it work properly.

hmm, I'm running 11.48.17134 and I still see the issue running your example (albeit on a second cycle of pressing 'spin' then 'stop' it works) . Either way this is a simplified version of a more complex real world example. Hiding and showing the div after removing the class seems to force a redraw, as pointed out in comments above — Slappywag, Nov 19 '19 at 15:24

Pooya Panahandeh · Answer 2 · 2019-11-19T15:34:30.763

0

IE is not a smart browser, and you have to define all the way around in case you want it works in a way you want. you usually can solve this problem by adding 'use strict' to top of your js code or maybe use polyfill, but those are not the real solution. In IE in the same case, we face the bubble up event, then you need a statement if the click happens then go forward and do it. check this link for more info.

edited Nov 19 '19 at 15:34

answered Nov 19 '19 at 15:24

Pooya Panahandeh

319
3
15

1

*IE is not a smart browser* --> I think it's more correct to simply say *IE is not a browser* ;) – Temani Afif Nov 19 '19 at 15:36

score 0 · Accepted Answer · answered Nov 22 '19 at 10:15

As pointed out by epascarello in the comments this is an IE11 bug, and the solution is to force the browser to redraw the affected element. In the example above simply updating the elements style.display property was enough to stop the animation:

stopButton.addEventListener("click", function(){
   banner.classList.remove("spin");
   banner.style.display = "block";
})

In my real world problem I was using jQuery, so calling .show() on my element after removing the class was enough.

Removing class does not stop keyframe animation in IE11

3 Answers3