CSS animation does not apply left value on each keyframe

Issue #12872907 • Assigned to Steven K.

Details

Author
Juan F.
Created
Jul 21, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

This animation works correctly on Chrome, Firefox, Opera and Vivaldi, but when it comes to IE and Edge it does not apply the left positioning value.

You can see it here in action https://jsfiddle.net/03ddygdx/

<div class="progress-container">
 <span class="background-progress-bar">
  <span class="progress-bar indeterminate"></span>
 </span>
 <span>
</div>
.progress-container {
  position: relative;
}

.background-progress-bar, .progress-bar {
  width: 100%;
  height: 10px;
  top: 0px;
  left: 0px;
  position: absolute;
}

.background-progress-bar {
  background-color: pink;
  z-index: 8;
}

.progress-bar { 
  background-color: red;
  z-index: 9;
}

.indeterminate {
  animation: indeterminate 2.5s infinite linear;
}

@keyframes indeterminate {
  0% {
    width: 30%;
    left: 0px;
  }
  25% {
    width: 50%;
    left: 50%;
  }
  50% {
    width: 10%;
    left: 0px;
  }
  75% {
    width: 30%;
    left: 0px;
  }
  100% {
    width: 0%;
    left: calc(100% - 5px);
  }
}

Attachments

0 attachments

    Comments and activity

    • I didn’t find a way of editing the issue, so I’m posting this here.

      I’ve found a workaround for this problem. Replace “left” in the keyframes of the animations for “margin-left” and you’re good to go. So I guess Edge and IE are having trouble applying the left attribute on animations.

    • Turns out the problem was using “calc” to get the size of the left attribute, not in the attribute itself. Removing the “calc” and adding the value myself makes it works as I wanted to, so the bug is in there.

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in