transform value in keyframe seems to compute to none when it contains a CSS variable

Confirmed Issue #12084341 • Assigned to Greg W.

Details

Author
Ana T.
Created
May 20, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15.15063
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Start with two div elements and make them clearly visible with a box-shadow and a bigger font.
<div>BOO</div>
<div>BOO</div>
div {
  max-width: 2em;
  box-shadow: 0 0 0 4px;
  font: 5em/2 tahoma;
}
  1. Set an angle --a custom property and use it in a rotate() for a transform value. Change the value of --a for the second div. So far, so good.
div {
  --a: 0deg;
  transform: rotate(var(--a));
}

div:nth-child(2) { --a: 90deg }
  1. On these div elements, set a keyframe animation that changes the transform value to one that chains a translate(100%) (or anything else, really… the result is the same with scale(2) as well) to the initial one.
div { animation: ani 2s infinite }

@keyframes ani {
  to { transform: rotate(var(--a)) translate(100%) }
}

Expected result: the two divs slide along their x axis (which was rotated by 90deg in the case of a second one). This is what happens in both Chrome and Firefox (recording below).

gif recording of expected result

Actual result: the two divs behave as if the transform inside the keyframe was set to none.

gif recording of actual result in Edge

LIVE TEST: http://codepen.io/thebabydino/pen/JNeydv/

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Greg W.”

    Changed Status to “Confirmed”

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

Sign in