Jump to content
Search Community

Opacity & Rotation not working properly in IE 7, 8? Can you check my code?

pol
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

Posted

Hi,

 

First - thanks so much for making this javascript framework!

 

I've been trying to get an animation going in IE7/8 that I got to work on all other browsers using your framework, but it doesn't function properly in those browsers.

 

You can see it in action here: http://neu14.com/transitions/print/index2.html

 

I'm also attaching my files -> see index2.html (that one uses greensock).

 

Thanks for any thoughts!

Pol

 

PS: I'm unclear if I need the CSS plugin for rotation or opacity or not since they both can be numeric? (I used it, but not sure if it was needed)

animation.zip

Posted

I noticed several things:

  1. Your jQuery script that is supposed to kick things off isn't firing in IE8 (and before). $("#highway-bg").load(transition); I'm not quite sure what you're trying to do there, but I think it'd be better to just call transition() directly. Looks like a jQuery or IE bug.
  2. You've got a bunch of Firefox-specific styles applied directly to your image elements which would explain why things work differently in Firefox than other browsers. I suspect you'll want to strip that stuff out.
  3. You're loading a file with the wrong name (EasePack.js.js).
  4. There's a bug in IE 8 (and earlier) that incorrectly renders elements that have a rotation applied AND an alpha value (both are filters) and the transform is AFTER the alpha in the list of filters (that's just silly). I just posted a new version of CSSPlugin that ensures the transform/matrix comes first. Please download the latest version and you should be set (after fixing the other errors above).

Does that help?

  • Like 1
Posted

You're amazing, thank you so much! I'll address all of those and re-download and get back to you with the results.

Posted

Got it working! Thanks for updating the CSS plugin, I really appreciate it. One note and one more question:

 

Question: How do I change the animation step size (meaning the frame rate so to speak, or the interval at which the animation is updated), so I can lower the processing burden on older and less efficient browsers such as IE? (also if you happen to know for Jquery, that would also be a bonus)

 

Note: I did need the browser-specific CSS for IE and older other browsers (wouldn't work without)

Posted

To change the interval at which all tween's update use the ticker's fps() method like so:

 

TweenLite.ticker.fps(30) // sets max framerate to 30

  • 6 months later...
Posted

I am having problems in IE with rotation and alpha transparency can anyone give me an alternative to the way i am currently implementing and get rid of the dreaded black around the png. I have attached working files and everything is great in all browsers except IE 8 and below. 

 

thanks for your time, 

 

Scott

_GC.zip

Posted

Hi Scott,

 

Welcome to the GreenSock forums.

 

I wish I had better news for you, but that black border around transparent pngs is a bug baked deep into IE8. I have researched the issue in the past and to my knowledge there is no reliable CSS or JavaScript based solution. 

 

The closes I've come to a "solution" is this: http://stackoverflow.com/a/8587386

 

Using those settings in photoshop, you don't get the black border, BUT there is no anti-aliasing either. No smooth gradiation of semi-transparent pixels. If anything you could load images compressed this way only for IE8 and it may look a touch better than the black border.

 

I've attached your files with 1 of the images using the settings mentioned above. It doesn't look great, you'd probably get similar results with a gif.

 

 

_GC_png8bit.zip

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