Safari's WMODE Blinkey Background Bug

Note: This post is out of date. To see the stunning conclusion, read the update!

With the new Tourism web site, I've been introduced to a whole new world of browser bugs - the bugs associated with using Flash.

Since this is my first foray into Flash, I tried to use as little of the stuff as possible. The design called for the use of a flash-animated header with a integrated navigation menu. My usability alarm immediately went off: "you can't put a piece of the navigation structure inside of Flash! What about people who have flash disabled? What about people using screen readers or text-only browsers! For Gods' sake man, think of the spiders!"

So, I crafted a particularly tricky piece of CSS and HTML, and positioned a DIV containing an unordered list over the flash. At first, it disappeared entirely - but I was not daunted.

Some of my video experience reminded me that video is a tricky beast, and isn't always displayed like other items on your screen. So, I did some digging and discovered that the problem was indeed the display mode of the flash. A quick addition of the 'wmode' attribute (set to 'opaque') and we were off and running. It was accessible, it was pretty, it looked like the perfect solution! I ran up to the designer, and we loaded it up in Safari.

She was impressed by the appearance, and seemed genuinely happy with how it had worked out. Then she hovered over one of the links, and the box disappeared.

I was unprepared for that, to say the least, so I did a little digging on Google. It turns out that there is a bug in Safari that causes problems with hovering elements positioned over Flash, and there's no work around currently.

I quickly assured our designer that it was only a Safari bug (the majority of our visitors are using IE variants), and that I would do all I could to resolve it. With a little more digging, I discovered that applying a background image worked marginally better than using a background color in our situation, so I applied a 1X1px image of the color white. The link text still had a white background, but the container DIV still always lost it's background color.

I believe I've come as far as I can with this particular bug, and the rest is going to have to be done by the folks behind Safari.

Tags: css browsers troubleshooting

Add Your Comment