Transforms don't work on IE8

[joncys]

I'm scaleing a huge div with absolutely positioned content inside. The problem is, that Matrix transforms seem to work on every browser (FireFox, Chrome, Safari, Opera, IE7, IE9), but not on IE8.

 

I looked at the source code, and it was generating this code for the filter on IE8:

 

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4091666666666667, M12=0, M21=0, M22=0.4091666666666667, Dx=0, Dy=0) ;

 

I remember reading, that IE8 filters must be prefixed with the

-ms-

prefix. Maybe that is the case, transforms seem not to be working.

[Rodrigo]

Hi Jon and welcome to the forums.

 

First GSAP JS does not support css3 properties yet, Jack (Greensock developer) is currently working on it. But he got a workaround which you can see here:

 

http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/page__p__22253#entry22253

 

And based on that post another user came up with this:

 

http://forums.greensock.com/topic/6729-swinging-sign/

 

You can also find more info about transform Matrix on IE8 here:

 

http://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8

 

I believe that there might be your problem. Any way it would help to see the code of your tween/timeline to find out more.

 

Hope i can help a little.

Cheers,

Rodrigo.

[Carl]

Hi Jon,

 

Can you please provide a sample that we can test? Just include the most minimal html, js and css to illustrate the problem. Would love to assist you further.

 

Thanks

[joncys]

Hi Jon and welcome to the forums.

 

Hi Jon,

 

Err... That's not my name... Thanks for the warm welcomes, non the less! My real name is Simonas.

 

I'm sorry, but I'm migrating from one web host to the other and have no space to showcase the real example. I've created a jsFiddle with a similar case:

 

http://jsfiddle.net/C8GSs/1/

 

The problem with this is that itrenders bad on IE7 or IE9 (the real example renders fine on IE7 and IE9).

I suspect, that filter notation on IE8 is different from filter notation on both of IE7 and IE9. Furthermore, my usage of scale'ing probably goes against all best practices of HTML. I need a very fluid layout, if there are better ways to achieve this, I'm all ears.

 

I'll post the real page, when I get the chance.

[GreenSock]

Let me guess - you're not testing in the real IE8 - you're using "Developer Tools" in IE9 or IE10 to simulate how IE8 would render, right? Unfortunately, this is one case where the simulated rendering appears to actually have the bug in it, not the real IE8. I tested a scale transform in the simulation just now and it didn't appear to work, but when I tested it in the real IE8, it worked fine. Unfortunately I'm not aware of a way to work around the simulation, but that shouldn't really be necessary anyway since the goal is to make it compatible with the real thing (not the simulator). Make sense?

 

If you still think there's a problem with the GreenSock files, please provide a few more details about your setup, what exactly is (or isn't) happening, and what we need to do to reproduce the issue.

[Jonathan]

i am having this same issue with IE8 (IE8 standards) .. where a transform like scale wont scale, but actually translates (moves) the element ... and im testing on 2 actual Windows XP PC's - IE8 standalone - IE8 (IE8 standards)

 

I also see the same rendering issue even on 3 Windows 7 PC's - with IE8 standalone - IE8 (IE8 standards) and also tested with windows 7 - IE10 -- rendering modes -- Browser Mode: IE8 (Document Mode: IE8 standards)

 

And im testing on actual Windows PC's in a non VMware (virtual environment) ..

 

looks like IE8 behaves differently on an actual PC versus a Virtual Environment

 

i have screenshots in another post, and another user has experienced these same issues:

http://forums.greensock.com/topic/8178-ie8-and-scale-not-working/?view=findpost&p=31502

http://forums.greensock.com/topic/8178-ie8-and-scale-not-working/?view=findpost&p=31511

 

I am even having issues with clearProps not clearing properties on actual IE8 (IE8 standards) windows XP and windows 7 PC's.. discussed in this post:  http://forums.greensock.com/topic/8173-clearprops-not-clearing-properties/?view=findpost&p=31476

 

any help will be highly appreciated!

[Carl]

Hi Jonathan,

 

First, I have to say that we really appreciate the that you have shown interest in not only getting help in the forums, but also helping others. Its fantastic to have community members helping each other out. Thank you.

 

This thread is 9 months old. Adding links to your similar yet more recent threads can make things a little difficult to keep track of. We are looking into the clearProps in IE8 issue. As for the scale issues in IE8 we will certainly look into that too. This is really the first we have heard of someone mentioning that IE8 running on a virtual box is different than a "real" os install. May be very difficult to track that down as our machines (real and virtual) have run plenty of IE8 tests with no issues. Furthermore, many of the developers using our products are using "real IE8 in real win7" and they report back with very favorable results. 

 

keep your eyes on those other threads.

 

Thanks again for all the assistance.