Animating %-valued translate transforms fails when chained with another transform

Issue #9457269 • Assigned to Rick J.

Details

Author
Ana T.
Created
Oct 21, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

1. Create 2 identically sized, absolutely positioned divs that initially sit on top of each other.

2. On the first div, apply the following transform chain:

transform: translate(50%) rotate(90deg);

This first transform function (translate(50%)) moves the element in the positive direction along the x axis (to the right) by half its size along the x axis.

The second transform function (rotate(90deg)) rotates it in the positive direction (clockwise) around the z axis (coming out of the screen towards us).

3. On the second div, set the following keyframe animation:

@keyframes a {
    0%, 25% { transform: none; }
    50% { transform: translate(50%); }
    75%, 100% {
        transform: translate(50%) rotate(90deg);
    }
}

This should animate the second div in stages until it’s on top of the first one again. This is what happens in Chrome or Firefox.

In Edge, the translate(50%) doesn’t happen, just the rotate(90deg). Same issue when using translateX() or translateY() instead of translate(). Same issue when chaining with another rotation function, with a skew or px-valued translate function instead of rotate().

Using a length-valued translate() (px, vh) works as expected.

Test https://codepen.io/thebabydino/pen/GjPvPQ?editors=0100

Attachments

2 attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Assigned To to “Rick J.”

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

Sign in