Accessibility

CSS Advisor

Fixing Safari's wmode flicker

by achtungbaby on December 20, 2006 Avg Rating 3.7 (10)   |   Log in to rate post.

Tagged with wmode , flicker , Safari 2.0 , transparent flash , safari , opaque flash , Safari 1.0 , Background

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



Comments (6)

To add a comment, please Log in.




Check again...

If you check vidman's link, you'll see that when the lightbox appears over the
flash, the background of the lightbox blinks and disappears in Safari in the
regions over the Flash. So the issue still stands... If you do anything in the
overlay to trigger a redraw (such as underline text in a menu rollover), it will
trigger this bug. Also, sometimes it will happen purely because of what's
going on in the Flash. It's difficult to predict. Using SWFObject or UFO or
anything else doesn't matter, because it still comes down to the wmode.
Remember, this bug is Safari-only.

achtungbaby, can you clarify

Sorry, I guess I'm just dense. What exactly is the fix? I looked at your source code
and you are using "opaque" but that didn't work on my site. I'm sure I'm missing
something. Can you help? TIA

Apologies!

I'd nearly forgotten about the URL I posted above.  I'd made several changes to the code I was delivering and forgot to update this piece.  So here it is again:

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

Regarding P7 -- the basic idea of this fix should be applicable to that navigation also.  In fact I believe I played around with it a bit when I was testing other navs that purported to be usable when draped over flash.   The main difference is that that demo uses multiple images for background effects; using this fix, you'd have to combine those images.

Regarding Geoff Stearn' SWF Object -- I'm fairly familiar with it.  In fact, the test page I posted uses it.  That's not really the issue.

Not working with PopMenu Magic by Project Seven

I was hoping that this fix would allow my P7 dropdown menu system to work
over the top of Flash content in Safari. Unfortunately it's still all glitched out.
Maybe I'm doing something wrong. ?

There IS a way to overlay dhtml OVER flash!

By using SWFObject (http://blog.deconcept.com/swfobject/) you can apply dhtml OVER the flash without ANY problems. It also overcomes IE's "Click to activate" bug.

To see this in operation take a look here and click on an image to see it open larger via the lightbox script (which is dhtml), over the flash header- http://www.zacspeed.com/exotecsp3.shtml.

Elegant solution

Quick, efficient and effective fix.  Thank you.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)