What is causing these browser rendering issues? Z-index conflicts? Positioning rules?

Question

I'm developing a product to be used by a number of customers alongside our Web application.

Quick background:

• These customers have incorporated into their pages a widget that we've developed.
• The widget's content can be modified by using our application.
• The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.

The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:

http://skitch.com/troywarr/dtexp/example-good

However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:

http://skitch.com/troywarr/dteqx/example-bad

As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.

I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.

I created a test bookmarklet as a live example. To see it, please:

• Open Firefox (the version under development currently only works there reliably).
• Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
• Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
• Click the bookmarklet while on that page, and you should see what I'm referring to.

Thanks very much in advance for any help! This has me baffled.

Answer 1

I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.

The iframe inside DIV#onespot_nextclick needs a background color of #FFF.

Simple!