Friday, August 27, 2010

jQuery Cycle Plugin Ghosting with Transparent PNG's in IE

Some one please stop the Internet Explorer madness. I definitely don't want to become the IE go-to-guy. Back to programming Ruby next week, but today was finally getting the jQuery Cycle Plugin working nicely with transparent PNG's.

The issue: IE's handling of transparent PNG's causing ghosting or dark artifacts when animating with the opacity property. It appears I'm not the onlyperson who has come across this problem. So to get IE to play nicely with jQuery Cycle Plugin I need to apply UnitPNGFix to all versions of IE; this hack is typically used for Internet Explorer version 6.x.

This worked well, but I was getting intermittent errors from Cufón when applying the hack:

Attribute only valid on v:image

As suggested by the guys and gals at Media Dog, placing the UnitPNGFix after the Cufón script would resolve the problem. I had no such luck until I explicitly identified which PNG's to "fix" by specifying the classes with "unitPng". Admittedly this what I should have done in the beginning. Once I specified the elements to fix, IE worked flawlessly with the jQuery Plugin.

As a side note, I've never integrated Cufón into a project before. Does it tend to mess up layout in older browsers? When I say older, I mean Internet Explorer. It certainly generates a lot of HTML, and I'm not totally sure if people are aware of the legality converting fonts and having these openly available on the 'Net. Definitely something I need to further investigate.

Please note this blog is no longer maintained. Please visit CivilCode Inc - Custom Software Development.