Jump to content
GreenSock

sigmundsquirrel

simple scaling in IE8 on resize?

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

I'm new to browser-based animation, having come from a Flash/Actionscript background. It's becoming obvious to me that I'm going to need a LOT of help! So... I'm building a relatively complex animation site using a combination of jQuery and Greensock (thank god for Greensock!). It works fine in all the browsers I'm targeting except IE8, which the client insists upon.

Most of the problems have to do with scaling and opacity. I'm working on them one at a time. Scaling first. Here is a simple page where the image needs to fill the browser window at all times without losing its aspect ratio. In this instance, the image needs to be in an img tag in a nested div tag.

Scale and Resize Test (image should fill window at all times without distortion)
http://www.poddesign.com/skidmore/beta/v2_ie8/scaletest.html

I have a sizing function triggered by $(window).resize that uses TweenMax.set(target, {scale: dynamic_variable}); where the dynamic variable is calculated from the window height and width and the content height and width. It works everywhere but IE8.

Can you look at it and tell me why it isn't scaling at all in IE8? I thought Greensock TweenMax was performing cross-browser calculations under the hood, so that the scale property would translate to an MSFilter (or whatever it does...)

*If you want to see a working version of the site on browsers other than IE8 (to see what I'm ultimately trying to do; the screens need to fill the browser), try this beta linkhttp://www.poddesign.com/skidmore/beta/v2/

Link to comment
Share on other sites

Nice work on the site and thanks for the reduced test case.

 

Yes, we certainly do perform cross-browser checks under the hood and 2D transformations do work in IE8. 

 

In your case you are applying the transformation to a parent element, and IE8 does not allow those filters to trickle down to the children. What a great browser;) 

 

We considered looping through all child elements behind the scenes but that could be a real performance drag on an already deficient browser. 

 

This topic is discussed in length with a few solutions here:

http://forums.greensock.com/topic/6934-animation-in-ie8/

 

You might get by with just applying filter:inherit to the children.

 

Please post back with your solution

  • Like 1
Link to comment
Share on other sites

Aha! In the simplified test page I posted above, adding filter: inherit to the child div worked! You can test that link again to see it. I'm going to try it out on more advanced nesting and see if it holds. But that's already a better solution than what I was considering. Thanks!

  • Like 1
Link to comment
Share on other sites

Cool, glad to hear it worked. IE8 will quickly remind you of the joys of Flash development. 

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.
×