IE and the flash "wmode" madness

November 23, 2011


This post was originally published in the Rambling Labs Blog on November 23, 2011.


One of the reasons that didn’t allow me to release version 0.1.3 of the jQuery Rambilng Slider earlier this week was a really ugly bug with IE, flash and transitions from and image to a flash element and viceversa.

The problem: There are some transitions on the slider that require an image (or several) to be on top of the flash, so that it fades out and reveals the flash. This works fine on Firefox and Chrome, but when the time arrived, it just didn’t work with IE.

I did a lot of googling and the only thing that I found over and over again was to include a param tag inside the object tag, with a name of wmode and value of transparent or opaque and to add the wmode attribute with the same value to the embed. But it just wasn’t working.

I spent a whole morning and half an afternoon trying to find what the issue was and got nothing. That is, until I checked the embed tag being included… It had the wmode set to always. But why??

Well… In the slider initializing the original elements are cloned and added to an animation container, in order to work out the transitions. It seems that IE takes the decision of which attributes to clone from the embed elements.

That just sucks! It sucks so bad! But thankfully there is an easy workaround.

The solution: After cloning I just added this line:

clone.find('object').prepend('<param name="wmode" value="opaque" />') unless clone.find('param[name=wmode]').length
clone.find('embed').attr wmode: 'opaque'

Now that’s one ugly hack, but at least my headaches are over.