Jump to content
Search Community

TweenLite, scaleX and IE 8 problem

Mr.Morton 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

Hi,

 

Just started using Tween for JS, used to use AS version, so i was exited to find a JS version :-)

 

First of all works great, BUT I am having som problems with IE8 :-(((

 

Basically I am trying to scale a Image from small to VERY large. To maintain relative good quality i have initially scale the image down, and I am then using scaleX/scaleY to scale the image up in size.

Works like a charm in Safari, Chrom, Firefox and IE9, BUT breaks in IE8 :-(

 

Seams like IE8 is scalling very poorly, very bad quality when scaled up, but WORSE it seems to hide the overflow, so one can only se the image, in the area where the original image was :-(

 

You can see for yourself here: https://dl.dropboxusercontent.com/u/2146283/html/example.htm

 

and fiddle here: http://jsfiddle.net/ha4PT/8/light/

 

Hope someone can help, would really prefer this over jquery UI :-)

 

Kind regards

Mr.Morton

 

Link to comment
Share on other sites

Ok, that absolute positioning fixed the clipping part.

 

But the other problem still exists, seems IE scales from the rendered small version, resulting in a really poor pixelated quality when the image is scaled times 9.

 

Here are screenshots from IE8 versus FF:

ff.pngie8.png

 

 

Any tips getting this working in IE8 and I am assuming IE7 also sucks :-(

Works fine in IE9 :-)

Link to comment
Share on other sites

Just a guess, try not shrinking it with css prior to the tween running. Use the pages css to set the natural (large) size of the elements.

Don't set the container to 40px by 40px. Start big and natural and let TweenLite scale it down

 

 

 

TweenLite.set("#basket_container", {scale:0.1});

TweenLite.to("#basket_container", {scale:1}) // or whatever value

  • Like 1
Link to comment
Share on other sites

Thank you for your advice...

 

The initial set to smaller worked, but gave me alot of other CSS positioning problems :-(

 

So I actually ended up using the version that looks like crap in IE8 but adding the Boilerplate - please update browser. Not optimal, but i am tired of using so many hours trying to make IE act correct :-)

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