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
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
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.