It is a known fact that some browsers can’t draw layers (absolutely positioned) over Flash files or drop-down boxes. To see why that happens, refer to my first WCH post, which was my first tackle with this problem.
Now, after extensive testing in several Windows and Mac browsers, I have much better picture how all this works.
If you look at the example page, you’ll find two sets of tests. First, I wanted to see how browsers handle
embed) element which loads Flash file without
wmode="transparent" parameter (read more about this in Macromedia tech note). I applied WCH script to second layer only.
In the lower set, I added
wmode parameter, and applied WCH again.
IE 6: needs WCH to cover drop-downs and Flash. Transparent Flash is always covered, regardless of WCH.
IE 5.5: needs WCH to cover drop-downs and Flash. Transparent Flash is always covered, regardless of WCH.
IE 5.0: WCH uses show/hide workaround. Transparent Flash is always covered, regardless of WCH.
Firebird 0.7: always cover drop-down, only transparent Flash. Transparent Flash is always covered, regardless of WCH.
Opera 7.22: always cover drop-down, never covers Flash (WCH is properly applied but it has no effect - actually it hides the layer itself?!)
It’s an obvious conslusion that WCH can be used only with IE 5.0+ to have any real effect. Since IE/Win rules the end-user market, this script comes very handy.
OmniWeb 4.5: always covers drop-down, never covers Flash
IE 5.2 Mac: always covers drop-down, only transparent Flash
Opera 6.03 Mac: never covers either drop-down or Flash
Camino 0.7: always cover drop-down, only transparent Flash
Firebird 0.7: always cover drop-down, only transparent Flash
Safari 1.1: always covers drop-down, only transparent Flash (initially all covered, until flash animation starts which then removes the layer)
Conclusion: newer Mac browsers always cover drop-downs (all but Opera 6.03). Flash can be covered if
wmode=transparent is used. WCH has no effect in any Mac browser.
WCH script has changed according to findings above. Since it’s usable only in IE/Win, I added the check for this, since its use cause problems in some browsers (Opera, Opera…).
insertAdjacentHTML, an IE native function, to insert the hiding iFrame. Since script does not deal with any other browser, I have removed almost 3kB of code needed to emulate that method in other browsers. If you need that code (as it is very handy), download it by right-clicking here.
I recommend you always use
wmode="transparent" when loading Flash files, and use WCH on for IE/win.