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.