Scaling Animation Issues in IE10 and 11

[dada78]

Hi guys,

I am working on a banner animation that involves scaling 2 images (placeholders) at the same time in a sort of parallax effect:

 

See the Pen ffb31fe839a80e3e8f4826561bd3f691 by dada78 (@dada78) on CodePen.

 

It animates smoothly in webkit and mozilla but stutters (a lot) in IE10 and 11.

 

ANY clues how to solve this at all?

 

Thanks!

[GreenSock]

It looks to me like IE is applying pixel-snapping in their rendering algorithm (which has nothing to do with GSAP). Try applying a super small amount of rotation to force IE not to snap pixels. Like rotation:0.1. Seemed to work well when I tried it.

[dada78]

Yep, thanks Jack! Adding 

rotationZ: 0.01

did the trick! Awesome  

[Oliver16Years]

If we put this little golden key in the css of the root element of the ad, the nice smooth movements are back in IE!

 

transform:rotateZ(0.001deg);

 

No more complaining from the Client who is checking the banner on IExplorer on his office laptop.

No visible rotation, no increased processor usage.

 

Its more like a diamond key!