Once upon a time, all front-end web developers used to get worried about html dropdown menus going over Flash movies. Or anything html going over them for that matter.
Time and work drags on, and we have wmode="transparent", swfobject and a lot more confidence. So it was without too much trepidation that I approched some very "designed" dropdown menus at work - you know the sort, rounded corners, translucency, the usual fun and games. And it's while building and testing these that I started to have some "fun".
There's a rendering issue on Mac browsers, where dropdown menus using "fancy backgrounds" and rollover sprites flicker pretty badly when over an swf. In some cases it's enough to make the menu unusable. The Adobe site menus on the homepage are a good place to see this in action if you've got a Mac. But it has to be a certain kind of Mac - and this is where the "fun" starts.
Our own project's dropdown menus were basically shit on my test Mac, to the point of unusability. But the design's signed off, the menus are fine on Windows. No retreat, no surrender.
After initially looking at various browsers and flash player versions in the name of "research", the flicker effect got pinned down to an illogical list of browsers (and this is obviously not an exhaustive one, you can tell by reading it):
- Safari 2 - flicker present
- Safari 3 - no flicker
- Firefox 2 - no flicker
- Firefox 3 - flicker present
It was the Firefox bit that got me. How can a browser introduce this issue after it's been fine in an earlier incarnation?
Oh well, these things happen all the time - we'll just turn off the dropdown menus if you're on a mac, the traffic stats can back this decision up as it's a niche platform in terms of this site's visitors. Which is a bit of a crappy solution to say the least, so a little bit more thought and some more research was applied.
The upshot of what's been found out is that the flicker bug seems to appear on PPC Macs, and not on newer Intel based machines. My "death's door" G4 Mini tester didn't like it, neither did a fancy G5 tower. But any Intel Mac I could lay my mitts on was happy as larry.
It also turns out you can still serve menus to PPC users by simplifying the area that will go over the swf to the point of "just a coloured background box with links in" - as I found by simply stripping back each element piece by piece. But at least something's working for the PPC crowd, and that's better than bugger-all.
Our own compromise is to sniff for "macppc" navigator.platform (I know I know) and if we hit it, simply substitute the css class for the menu - for instance from ".dropdown" to ".fallback" or something along those lines. The fallback class is the stripped back dropdown. This way Mac users all still get the dropdown, and only PPC based Macs get a reduced experience. You could take this approach much further if you wished, basically going to browser version rather than just the platform. However the PPC is no longer in production, so it doesn't seem such a great idea to go back to the ugly old sniffing days to that extent unless it's really critical.
Hopefully someone out there might find this vaguely useful - it's actually renewed my confidence now the issue's pinned down and there's a workaround for it 
No comments for this entry.