Crossfade Transparency in ie8 and 7.

[dbooth]

I have been wrestling with a site that is filled with crossfading 24bit png images.

 

My images have transparent shadows.

 

Since this is so common, I wonder if anyone knows on an example?

 

I've wrestled with the ms filters and I can get them to work in jquery where there is only one transparent color but I cannot render smooth baked in shadows.

 

Is there an example?

 

Does GSAP handle png images for ie7 and ie8?

 

Much thanks,

 

Don Booth

[Rodrigo]

Hi Don,

 

Question, are you trying this with IETester or some IE rendering engine?, because i see no problem with the following example using Chrome IETab, which I've learn to cherish and trust more than IETester.

 

http://jsfiddle.net/rhernando/Z2qEN/

 

Also it would help if you could post some of your code in order to see if someone here can find another way to help you.

 

Also if you search in the forum there's been a lot of people with some trouble in IE8 mainly, and as Jack has explained before, it seems that the rendering abilities of IE8... well... they pretty much stink

 

Anyway take a look at the code of my example and post some of yours in order to get a more complete idea of what you're trying to achieve.

 

Best,

Rodrigo.

[dbooth]

Hi Don,

 

Question, are you trying this with IETester or some IE rendering engine?, because i see no problem with the following example using Chrome IETab, which I've learn to cherish and trust more than IETester.

 

http://jsfiddle.net/rhernando/Z2qEN/

 

Also it would help if you could post some of your code in order to see if someone here can find another way to help you.

 

Also if you search in the forum there's been a lot of people with some trouble in IE8 mainly, and as Jack has explained before, it seems that the rendering abilities of IE8... well... they pretty much stink

 

Anyway take a look at the code of my example and post some of yours in order to get a more complete idea of what you're trying to achieve.

 

Best,

Rodrigo.

 

Thanks, Rodrigo.

 

My difficulty is with png transparency.

I would like the site to work with ie7 and ie8. I'm testing with ie7 (the real thing) and, once I nail that, I'll make it work with 8.

 

Specifically, the problem is with cross fades.

 

My images have a shadow baked in and, without assistance, the crossfades don't work.

Working late last night I found DD_belatedPNG.js.

 

I built a little test:

http://www.donbooth.ca/gsap_test/

The images on the left fade as they should with jquery and tweenlite.

The image on the right just gets ugly.

In further testing I could not animate scale and I did not try other properties but, frankly, opacity will work just fine for me here. In this case I don't need more. I have yet to test this in the site I am building but it looks promising. As well, I have to tested it in ie8 and I'm crossing my fingers and holding my breath because Microsoft changed things in 8. We'll see.

 

At any rate, cross faded png images with gradient transparency are an important part of my work and if I am missing something in the way I should be using tweenlite then I'd very much like to know about it.

 

As I thought, these older versions of ie are still very much with us and, as gsap grows in popularity I'm sure that these browsers will be the focus of many questions. Perhaps it would be helpful to include a section that deals with tweenlite and explorer.

 

Much thanks for your assistance,

 

Don Booth

Toronto

[Carl]

Hi Don,

 

Thanks for providing those files and more info. I have attached them as a zip so that its easier for our team to test them locally.

 

Also, just so you know, Rodrigo is one or our respected community members that often lends support in the forums. He assists folks in ways that are just as good if not better than I could. His initial response to you was very much along the lines of what I would have done to get more info. (Great job Rodrigo) It seems now that you may be in need of some more "official" help.

 

Just wanted to make this distinction, just so you know that he can't do too much with your suggestions. All of us GreenSock certainly do appreciate them.

 

And yes, IE still troubles everyone. In some ways IE8 is worse than IE7. I'm sure you've searched and found that IE7 and 8 are notorious for mis-handling pngs.

 

Unfortunately there is very little GSAP JS can do to dictate how a browser decides to render elements. For the most part GSAP JS provides the instructions on how certain properties should be adjusted... but when it comes time for the browser to display those adjustments, odd things can happen.

 

I see that DD_belatedPNG.js actually does some good in regards to fixing some IE-transparency issues. Nice find. I'm not so sure though that its feasible to bake in an extra 12kb of custom code that very may well impact the performance of the engine. The author of that script defines his approach as "silly" which doesn't give me a lot of confidence in it holding up under stress. Obviously we would have to come up with our own solution to this problem, but I don't know exactly what that would entail or if it is at all possible.

 

One thing to note. Basic 2D transforms like rotation, scale, skewX and skewY should work fine all the way back to IE6. Were you having trouble just with transparent PNGS scaling? Were they scaling but just looking odd? If you experienced clipping, try setting the element's css position to absolute.

 

Please don't hesitate to provide more very simple files that illustrate unexpected results. We very much want to address every issue that comes up.

 

We will continue to poke around at your sample files and we will get back to you with some more info on dealing with transparent pngs in IE8 and IE7. I recall at one time I needed to follow very specific steps when exporting a png from photoshop just to get its transparency to render properly in an IE. I wasn't able to quickly find that article.

 

And yes, a page dedicated to possible IE issues is a great idea. We are in the process of formulating an extensive list of supported css properties and annotating where certain browsers may have issues.

 

Thanks a ton for posting your issue here. We'll do our best to get you some more answers.

 

Carl

transparencyTest.zip

[GreenSock]

Glad you got things working, and thanks for letting us know how. It's a tricky dilemma because IE8 and prior versions are really getting long in the tooth and widespread support for them is dropping off quickly, yet they're still lingering around causing problems. We want to help ensure that various effects work across all the major browsers, but sometimes doing so causes other significant issues. For example, if supporting 32-bit PNGs in IE8 and IE7 means boosting the file size by 50% of CSSPlugin and adding conditional logic that would slow the entire engine down slightly, is it really worth it (especially in light of the fact that people are quickly moving AWAY from supporting those browsers)?

 

As it stand now, it looks like your 3rd party solution for 32-bit PNGs in IE works fine, so there isn't a need to embed that logic into the core engine or CSSPlugin. That way, there are no trade-offs in terms of performance or file size for everyone else who doesn't need 32-bit PNG support in old versions of IE. Agreed?

[dbooth]

Thank you to everyone.

 

As far as I know, the most modern Microsoft browser supported by WindowsXP is ie8. There are still a lot of people using WindowsXP so many of us will be supporting it for some time to come.

 

The plug-in that I am using happens to work in this case, but not without enormous overhead and, to make it work in ie8 I found that I must force ie8 to emulate ie7. This is a terrible state of affairs.

 

Microsoft supplies filters to support the alpha property in ie7 and ie8. In addition, there are css filters the support transparent background gradients. I tried these filters. They displayed images properly until I wanted to fade them at which point they failed.

(progid:DXImageTransform.Microsoft.AlphaImageLoader

DXImageTransform.Microsoft.gradient)

 

Jack, your comment about creating 32-bit PNGs in Photoshop attracted my attention. In Photoshop when saving for "Web and Devices" the options for .png are 8 bit and 24 bit. It is my understanding that '24 bit' means '24 bits of color and 8 bits of alpha'. I have been wondering if this might be the problem as the Microsoft filters failed with images created this way. I tried "Save As" and ran into the same problem. Maybe I'm missing something in Photoshop? Perhaps, as you say, the problem lies in the images themselves?

 

I need to continue to monitor this issue because, while the plugin I used managed to (just barely) work on my current project, I have a second project that requires greater manipulation of semi-transparent images and it needs to work on "grandma's old computer in the basement". Yikes!

 

Any thoughts or wisdom you might have will be appreciated. And, for the benefit of everyone else who needs to build an application for old machines in the basement (and the garage), a page describing Tweenlite's capabilities on the old MS browsers would be appreciated (and it might save time in these forums as well).

 

Much thanks,

 

Don Booth

Toronto