Question

I need help determining what the cause of a serious visual glitch is with one of my production websites. It is only happening with Safari – Chrome and all other browsers are fine.

http://www.philanthropicdirectory.org/search

This is a Drupal 6.x website, running the following simultaneously:

• jQuery 1.3.2 (Drupal base/default)
• jQuery 1.4.4 (This is used here and there by overriding the jQuery namespace to ‘$js’ for certain advanced operations 1.3.2 can’t handle)
• jQuery UI 1.7.3
• Thickbox 1.8.2.19 (I’ve slightly modified this .js)

TO REPRODUCE:

1. Click link (visit the page): http://www.philanthropicdirectory.org/search
2. Click twice (once to center) on any of the 5 ‘coverflow’ panels to trigger Thickbox content
3. Once TB content loads, resize the browser window horizontally left or right
4. Notice the odd background-image and background-color offsetting
5. Switch between any of the 5 ‘tab’ icons in the upper right of the modal system
6. At any point, use Web Inspector to uncheck and then recheck any CSS property, anywhere
7. Notice how this instantly clears/fixes all visual glitches
8. Resize the browser window again or tab between the other tabs, and notice the glitches return.

If you notice the same things I am, it’d be great to get your machine config and Safari version.

• Before
  

• After resizing
  

• After tabbing
  

The images say it all, and as far as I could test, I can only reproduce this problem in the following setup, with Safari:

• MacPro, 6-core Xeon (2010)
• OS X 10.6.8
• 2 monitors: 1x 23″ Cinema Display (old silver one) + 1x 27″ Apple Cinema Display
• ATI Radeon HD 5770 (Mac version w/01.00.436 Driver)
• Safari 5.1+

I’ve tested other machines and other machines with earlier versions of Safari (4.x), and the problems are simply not present.

Is there anything you think I can test to figure out why this is happening?

PS: Only using one monitor at a time produces the same problems.

Answer 1

SOLUTION!

I noticed this happening with another website we’ve built – a website with nothing in common with the Drupal one with the problem here, save for the fact that this new one also has a Flash (SWF) file in the body, and I was applying a CSS property to an element with a negative z-index value.

It was happening on this new website because the container for the object in the HTML was set to

z-index: -1;

in order for elements positioned to overlap the object could be clicked on (otherwise, links on top of the object could not be interacted with).

I was able to permanently fix it by instead setting any elements positioned on top of the object

z-index: 1; /* or anything > 0 */

Given that solution, I hunted down any and all “z-index: -1” CSS on the Drupal website and sure enough there was an element within the Thickbox container that was shown on every tab – the big green “SEARCH” input button. It was styled that way because of visual needs (something to do with the fake inner-drop-shadow on the button).

I disabled the entire z-index property for this element, and lo-and-behold, the funkiness permanently disappeared on the Drupal website.

Hurray! It was surely providence that I came across the same issue more acutely on a different website.

Now I’m not sure the exact bug in Safari that is behind this without intense testing, but all I do know is that an object on the page + any element near it set to z-index: -1 equals total meltdown (on a Mac running Safari 5.x).