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

Fixed Issue #12084341


Ana T.
May 20, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
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 {
  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



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”

    Changed Status from “Confirmed”

    Changed Assigned To to “bbrinza”

    Changed Status to “Fixed”

  • Looks fixed to me in recent Edge builds

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

Sign in