问题
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:
- Click link (visit the page): http://www.philanthropicdirectory.org/search
- Click twice (once to center) on any of the 5 'coverflow' panels to trigger Thickbox content
- Once TB content loads, resize the browser window horizontally left or right
- Notice the odd background-image and background-color offsetting
- Switch between any of the 5 'tab' icons in the upper right of the modal system
- At any point, use Web Inspector to uncheck and then recheck any CSS property, anywhere
- Notice how this instantly clears/fixes all visual glitches
- 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.
回答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).
回答2:
I checked in Safari 5.1 (7534.50) on an HP Xeon running Windows 7. I don't see any glitches.
That's weird. Sounds like a race condition of some sort. Maybe there is a bug in your ATI driver? Since it fixes itself when you re-render it, perhaps you could introduce some delay somewhere which might give it more time to render properly?
来源：https://stackoverflow.com/questions/7745304/safari-jquery-thickbox-massive-visual-glitches