jQuery cycle plugin with transparency in IE

Question

After much searching I managed to find these two Cycle plugin options to allow for transparency in Internet Explorer cleartype: true, cleartypeNoBg: true,

The problem I'm getting now is a black block thing around the image that appears during the bounce transition than gets removed once the transition is complete and the image is sitting in the frame. It's only happening on IE.

Any ideas on how to fix this?

Answer 1

I edited the core of jQuery cycle and searched for function $.fn.cycle.commonReset.

I've commented out opts.cssBefore.opacity = 1;.

I know this is not the best solution but it works for me since I use the scrollHorz transition.

Answer 2

Reading the documentation it seems that clearTypeNoBG does the opposite of what you think: it tells the plugin to NOT correct for transparency under IE. Leave it on false. cleartype is automatically assigned the value !$.support.opacity and should also be left alone.

---

In other words, you're telling the plugin that the browser doesn't support opacity by setting cleartype, which is !$.support.opacity, on true and then you're telling it to not correct for this shortcoming by setting clearTypeNoBG on true.

Answer 3

I was seeing white blocks during the fade transition, even though my image didn't explicitly have any transparency.

I solved the problem by using an image editor (photoshop in my case) to add a full white layer set to 2% opacity above the image. Saved it out as a jpg and the issue went away.

Answer 4

I just did another search and came across Stack Overflow - Jquery Cycle IE7 Transparent png problem

Seems to solve it for me in IE8 using the Unit Interactive PNG fix.