CSS Keyframe Animation Not Working As Intended In IE And Edge

I made this animation and it's working like a charm in every browser but IE and Edge. You can see the page here https://jsfiddle.net/03ddygdx/ .progress-container { position: rel

Solution 1:

Edit: Ok, the problem was adding a calc() to calculate the size of the left attribute, so the bug is in there.

Edit 2: I created a bug report about this specific case, so if there is there any information about it I guess you could check it out here https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/

After hitting my head on the wall for a couple hours turns out it has to be a ie-edge bug. Changing the keyframes to this solved my problem.

@keyframes indeterminate {
  0% {
    width: 30%;
    margin-left: 0%;
  }
  25% {
    width: 50%;
    margin-left: 50%;
  }
  50% {
    width: 10%;
    margin-left: 0px;
  }
  75% {
    width: 30%;
    margin-left: 0%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}

Here is the working on ie-edge example https://jsfiddle.net/vwty99s9/1/

I guess these browsers have trouble applying left values on animations, so simply change left for margin-left and you're good to go.