Internet Explorer & jQuery Cycle Plugin Background Issue

This is one of those awesome bugs that wasted more of my time than I’d like to admit, so hopefully this post can help someone in the future.

The problem: I’m working on a site that uses the jQuery Cycle plugin. The chunk that gets rotated for the slideshow is an HTML list-item that contains another list with nested list items. (li -> ul -> li, li, li). The root li kept getting a background color applied to it, even though I specified that it should be transparent.

The solution: disabling the Cycle plugin’s default behavior of applying a background to the slideshow container element when using IE on a Windows machine with cleartype enabled. Add this little combo to your Cycle options and things should be fine:

cleartypeNoBg: true

The key was mention of this undocumented feature in this thread.

* * *