1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Fixing Safari's wmode flicker

Problem

In order to overlay Flash content with HTML, it is necessary to set the wmode parameter to transparent or opaque; however, Safari 2.0 will cause any HTML utilizing background images for hover effects to flicker. An example of this would be Adobe's own homepage navigation. When viewing this page in Safari, there is a noticeable flicker or jump when hovering over menu items.

Solution

Use an image sprite for rollover effects if necessary. An example can be viewed here: http://66.159.239.154/gene/mod/global-header.html

Detailed description

As of this writing, there are no simple workaround's for overlaying Flash content with interactive HTML, primarily because of poor Flash support from Safari and Mozilla as well for Mac (in fact Safari browsers using the Flash 6 plugin may not be able to see transparent flash at all). 

Although the different types of bugs vary when dealing with Safari and transparent flash, the only definitive one I was able to consistently verify was when the HTML overlaying the transparent flash required the use of background images, particularly when using background images to render hover effects for anchors.  In such cases, when mousing over an anchor, background images are re-requested from the server - a buggy behavior also displayed by Internet Explorer 6 (but for other reasons).

One of the more popular techniques used for dealing with IE's bug is through the use of image sprites, or background images that contain all of the various visual states of an anchor.
 

http://66.159.239.154/gene/mod/global-header.html

Text ID: FIXING_SAFARI_S_WMODE_FLICKER

---