Jump to content
Search Community

IE9 Compatibility

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Does anyone know why this wouldn't work in IE9 ?


It is code that will make my text have an explode effect, and it works very well in most browsers, but IE9 seems to ignore everything except for the opacity. Are there other properties or different syntax I can use to make it compatible with IE9 ?

for(var i = 0; i < numChars; i++){
  approachTL.to(mySplitText.chars[i], 1.75, {z:randomNumber(-1500, 2500), x:randomNumber(-280, 280), y:randomNumber(-240, 240), opacity:0, rotation:randomNumber(360, 720), rotationX:randomNumber(-60, 60), rotationY:randomNumber(-60, 60)}, "explode+=" + Math.random()*0.3);


I see why the 3D transforms wouldn't work in lower than IE10 but shouldn't X, and Y still work ?

And is there a way to get the 3D transforms to work in IE 9 ?

Link to comment
Share on other sites

Hello celli... 

  • Are you testing in standalone IE9 or is it rendering in IE9 document mode (fake) in IE10 or IE11 ?
  • And is this on Windows real PC or VM on an apple computer?

I did not see an issue in standalone IE9 on PC Windows 7 (64-bit)


You might have to view your codepen in full view like Carl's example above.



Link to comment
Share on other sites

in codepen in the top right part of the header bar, to the left of your codepen profile image..  you will see a dropdown that reads .. Editor.. if you click that the dropdown appears and has Full as an option. Which will display your codpen in full page mode, without any JS, CSS, and HTML edit panels.


This Microsoft Docs Transforms link.. ..has a section containing reference documentation for the Cascading Style Sheets (CSS) transform functions that are supported in Windows Internet Explorer. 

  • Support for 2-D Transforms was added in Windows Internet Explorer 9,
  • while support for 3-D Transforms was added in Internet Explorer 10.




I hope this helps! :0

Link to comment
Share on other sites

I just tested both Codepens on a VM running IE9 and Win. 7  --


Carl's codePen is working with regards to the X, and Y parameters. But my CodePen still doesn't have the explode effect, or maintain the X, and Y transforms.


The effect should scatter the letters when the text is eliminated from the stage, but instead it seems to only fade the opacity in IE9. There must be something I can do to maintain the X, and Y 2-D Transforms in IE9 (And understandably the 3D z, and rotation transforms wouldn't work in IE9)


Carl's CodePen

See the Pen fzyjt by GreenSock (@GreenSock) on CodePen


My CodePen

See the Pen Ixpqj by celli (@celli) on CodePen

Link to comment
Share on other sites

Okay! I think I narrowed it down, and might have solved it. It seems if we add a 'z' transform anywhere in the transform properties -- IE9 does not render the rest of the 2-D effects, but when I remove the "z" transform and test in IE9, it works :)


See this code pen, test in IE9, and then test in IE9 and remove the "z" transform "z:randomNumber(-1500, 2500)"

See the Pen AubGy by celli (@celli) on CodePen


I was trying many different combinations, and removing variables, so there are two helper functions with different names, but you can ignore that. It seems that adding a "z" transform will not render the other 2-D properties in IE9. Even if I add that to Carl's CodePen, it will not run -- Unless I am missing something ?

Link to comment
Share on other sites

I just checked in full view on a VM running IE9 / Win.7. Then I also checked BrowserStack's Live View which says they use real Win.7 and IE9, with no VM, and I get the same results on both! The text just fades out, and doesn't run the 2-D Transforms.


I can see the split text is working because the opacity fades out at slightly different times for each character.


Are you sure you are running IE9 ? This is now baffling me, because two separate machines with IE9/Win.7, give me the same results.

Link to comment
Share on other sites

Hey Jonathan, thanks for all the help. 

Celli, thanks for your patience.

Just so you know we are looking into this, will post back when we have some concrete results.

FWIW I've only been able to test lightly in a VM with IE10 in IE9 mode, and I'm not trusting those results.

Link to comment
Share on other sites

...just checking back in. In-case anyone was able to uncover anything related to this. I think the z property has something to do with it effecting the X, and Y properties in IE9. Unless my tests are not correct. Thanks guys for all your help!! 

Link to comment
Share on other sites

Hi Celli,


We found a small bug which was causing 2d transform values to be put into a 3dmatrix if a 3d property like z was provided(which is normal but we shouldn't be doing that in browsers that don support 3d)


Please grab 1.14.0 and test.

3d transforms should not be messing up 2d transforms in IE9.


Thanks for diligently reporting the issue and sorry for the hassle.


Let us know if this works.


You can grab latest files from link in my signature.

  • Like 2
Link to comment
Share on other sites

I did not personally see / test it on stand-alone IE9, but it was definitely a problem in windows 10 acting like IE9 and in stand-alone, real IE8.

I'm having trouble understanding how your IE9 would have handled it differently, but maybe its just one of those things.

Link to comment
Share on other sites

Thanks for the fast reply Carl,


I do remember sometime last year when i was testing some ken burns effects in IE8 standalone on Windows XP. You had sent me a screen video of what you were doing and seeing on your computer in IE8 using VM. You had sent me a screenshot or screen video of the IE8 version and build panel in IE8, (under Help --> About Internet Explorer) which showed a different build .. yours was showing a higher build for IE8 in your VM, than what microsoft allowed on IE8 standalone. My IE8 build was a lower verision than the one you had on your VM... and I had the highest build Microsoft allowed for IE8 on XP.


Weird Stuff :(


I did notice that in my tests, that VM had different rendering results compared to the standalone of IE versions. But what do you expect from Mircrosoft, the vampire of the internet,, sucking the life of web developers and web designers everywhere. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...