Skew in Internet Explorer

[cabbas]

Hey there,

I'm trying to get skew to work in IE, but it seems to either be bugged or it's not supported... I created a new project to test just a very basic scenario, and the issue seems to persist.

The setup

Created a rectangular shape, applied a -26.1 x-skew in the transform panel, animated the shape from left to right.

The issue

Shape (with skew applied) displays as a rectangle in the preview, moves across the screen, then the skew kicks in and "pops" the rectangle into a skewed rectangle.

Is there something to this property that I'm not doing correctly?

Thanks!

[miro.bojic]

Hi cabbas,

Technically, skew is a part of transform CSS property specification. For more details you can take a look here:

http://www.w3schools.com/cssref/css3_pr_transform.asp

Transform is supported only by IE10+, it will not work correctly in earlier versions if IE.

[miro.bojic]

Hi cabbas,

I did some further research and it seems skew and keyframe animation have some issues in IE10, it seems like a bugged behavior. Unfortunately, it seems there's not really a fix but hope that it will be fixed by IE devs at some point.

Have you tested this with IE11, does it occur there as well?

[cabbas]

I haven't tested this in IE 11 yet, but thanks for doing further research Miro.

In my tests I found that I can get skew to work if I do the following:

1. Create a shape that will be skewed.
2. Nest that shape inside a group.
3. Skew the group instead of the shape.

I've been doing this, and it seems to hold up for now!

[miro.bojic]

Great, I'm glad you found a workaround. Good luck animating!