Bungle
Bungle

Reputation: 19712

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

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

Quick background:

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:

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

Upvotes: 1

Views: 191

Answers (1)

Bryan Downing
Bryan Downing

Reputation: 15472

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!

Upvotes: 2

Related Questions