CSS animation does not apply left value on each keyframe (calc keyframe)

Confirmed Issue #12872907 • Assigned to wptcomptri@microsoft.com

Details

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

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.”

      Changed Assigned To to “wptcomptri@microsoft.com”

      Changed Title from “CSS animation does not apply left value on each keyframe” to “CSS animation does not apply left value on each keyframe (calc keyframe)”

      Changed Status to “Confirmed”

    • I also have found this same issue when using calc() inside @keyframes, my instance was using width. Example: https://codepen.io/anon/pen/qVJjYE

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

    Sign in