Bugs in CSS transitions and semi-complex transforms

Issue #5579312 • Assigned to Rick J.

Details

Created
Nov 25, 2015
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

==============

Ghttps://jsfiddle.net/Znegl/003g9us7/2/](https://jsfiddle.net/Znegl/003g9us7/2/)[https://jsfiddle.net/Znegl/003g9us7/2/](https://jsfiddle.net/Znegl/003g9us7/2/)

There are 6 tiles on the page. 3 of them are flipped (the ones with numbers) and 3 of them aren’t (the ones with diagonal stripes).

When hovering any tile it should zoom in by 15% and rotate 2 degrees clockwise in a .5 second animation.

Hovering a tile that is not flipped animates as expected.

Hovering a tile that is flipped rotates 358 degrees the wrong way arround.

Expected Results:

==============

Changing the transform of a DOM element from “transform: rotateY(180deg);” to “transform: rotateZ(2deg) rotateY(180deg) scale(1.15);” makes the element rotate 358 degrees the wrong way arround instead of just rotating the 2 degrees specified.

Changing the transform of a DOM element from nothing to “transform: rotateZ(2deg) scale(1.15);” scales and rotates the element as desired.

Actual Results:

==============

Dev Channel specific:

================

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

      Changed Assigned To from “Christian F.” to “Rick J.”

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

    Sign in