CSS3 animation is not working in IE11 but works in other browsers

Question

I have created a CSS3 animation on a button. At the moment, it works perfectly everywhere apart from IE. I know it wont work well in older IE versions, but I was atleast expecting it to work in IE11.

I have created a fiddle to demonstrate Fiddle

I call the animation on :before and :after like so

animation: 1000ms ease 0s normal none infinite running pulse-long;

If you open the fiddle in Firefox or Chrome, you should see the animation on the button working. If you open it in IE11, it is just a static dot. I have gone online and tried a few things, such as moving the animation frames to the top of the CSS file, but it still does not work.

Is there any way to get this animation working in IE11?

Answer 1

There are two things that are preventing the animation from working in IE11 and they are as follows:

• IE11 always has a problem when setting animation-play-state as running in the shorthand. There is no justification for this and it should probably be considered as a bug. Fix for this issue should be to just remove the running from the shorthand. This will cause no harm because the default value for animation-play-state is running.
• The parent button container's dimension is only 10px x 10px whereas the pseudo-elements are eventually getting a dimension of 60px x 60px during the animation. While other browsers are by defaulting showing the overflow, IE11 seems to be cropping it. This needs to be cross-checked with the specs to find out if it is a bug or something that is loosely defined.
• The fix for the overflow issue is again pretty simple. Just add a overflow: visible for the button container (.btnPulse.inactive). This will also not cause any problem in other browser because they are anyway doing this by default.

Snippet showing the overflow problem:

In the below snippet, I have avoided the animations and just added a couple of default box-shadow to the pseudo-elements such that the whole thing looks like 4 concentric circles with a red colored circle (produced by the button element) in the middle, followed by a white circle (blank space), followed by a blue colored circle (produced by box shadow of :before element) and then a green circle (produced by box shadow of :after element).

In Chrome, Firefox and Opera the concentric circles would be visible completely but IE11 will show only the center red circle because the rest is outside parent's area.

.btnPulse.inactive.throb::before {
  box-shadow: 0 0 0 16px blue inset;
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 60px;
}
.btnPulse.inactive::before {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive.throb::after {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 8px green inset;
  content: "";
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 60px;
}
.btnPulse.inactive {
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
}
.btnPulse {
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#button-container {
  position: absolute;
  left: 100px;
  top: 100px;
}

<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>

---

Working Snippet with the fix:

The below snippet has both the above mentioned fixes applied and it works in IE11, Chrome, Firefox and Opera.

@keyframes pulse-short {
  100% {
    box-shadow: inset 0 0 0 80px red;
    -moz-box-shadow: inset 0 0 0 80px red;
    -webkit-box-shadow: inset 0 0 0 80px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  }
}
@keyframes pulse-long {
  100% {
    box-shadow: inset 0 0 0 10px red;
    -moz-box-shadow: inset 0 0 0 10px red;
    -webkit-box-shadow: inset 0 0 0 10px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  }
}
.btnPulse.inactive.throb::before {
  animation: 1000ms ease 0s normal none infinite pulse-long;
  box-shadow: 0 0 0 0 red inset;
  display: block;
  height: 100%;
  left: 3px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 100%;
}
.btnPulse.inactive::before {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive.throb::after {
  animation: 2500ms ease 300ms normal none infinite pulse-short;
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 0 red inset;
  content: "";
  display: block;
  height: 30px;
  left: -9px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive {
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
  overflow: visible;
}
.btnPulse {
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#button-container {
  position: absolute;
  left: 100px;
  top: 100px;
}

<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>