Safari + jQuery thickbox =大量的视觉上的毛刺？ [英] Safari + jQuery thickbox = massive visual glitches?

问题描述

我需要帮助确定导致严重视觉故障的原因是与我的一个生产网站。只有Safari - Chrome和所有其他浏览器都可以使用。

http://www.philanthropicdirectory.org/search

这是一个Drupal 6.x网站，同时运行以下内容：

• jQuery 1.3.4（Drupal基础/默认）


• 并且通过将jQuery命名空间重写为'$ js'用于某些高级操作，1.3.2不能处理）


• jQuery UI 1.7.3


• Thickbox 1.8.2.19（我稍微修改了这个.js）

TO REPRODUCE： p>

1. 点击链接（访问页面）： http://www.philanthropicdirectory.org/search


2. 在任何5个coverflow面板上单击两次（位于中心）以触发Thickbox内容
3. 
   
4. 一旦TB内容加载，请向左或向右水平调整浏览器窗口


5. 注意奇怪的背景图像和背景颜色偏移


6. 在模态系统右上角的5个标签图标之间切换


7. 在任何时候，使用Web Inspector取消选中，然后重新选中 CSS属性


8. 请注意此即时清除/修复所有视觉上的问题。


9. 重新调整浏览器窗口大小




如果您注意到相同的事情，这将是伟大的，让您的机器配置和Safari版本。







• 之前
  




• 调整大小后
  




• 标签后
  







图片说的一切，只要我可以测试，我只能重现这个问题在以下设置，与Safari：






• MacPro，6核Xeon（2010）


• OS X 10.6.8


• 2台显示器：1x 23一个）+ 1x 27苹果电影院显示


• ATI Radeon HD 5770（Mac版w / 01.00.436驱动程序）


• Safari 5.1 +






我已经测试了其他机器和其他机器与早期版本的Safari（4.x），这些问题根本不存在。 / p>



有没有什么你认为我可以测试来找出为什么会发生这种情况？





PS：监视器会产生相同的问题。

解决方案

解决方案 b


我注意到这个发生在另一个网站，我们已经建立了一个网站没有什么共同的Drupal与这里的问题，除了这个新的也有一个Flash（SWF）文件在 body ，我正在应用CSS属性到一个负值 z-index 值的元素。 / p>



这是在这个新网站上发生的，因为HTML中的对象的容器设置为

  z-index：-1; 
  

，以便与对象可以点击（否则，对象顶部的链接不能与之交互）。





可通过将对象 c>

$ b上的顶部设置任何元素来永久修复
$ b

  z-index：1; / *或任何东西> 0 * / 
  

给定解决方案，我搜索了任何和所有z-index：-1 CSS在Drupal网站上，并确信在Thickbox容器中有一个元素显示在每个选项卡上 - 大的绿色搜索输入按钮。它的样式是因为视觉需求（与按钮上的假内投影有关）。








我禁用了整个 z-index 此元素的属性，以及永久性的永久性在Drupal网站上消失。





Hurray！这是肯定的预期，我在另一个网站更突出地遇到同一个问题。





现在我不确定Safari中的确切的错误，测试，但我所知道的是页面上的对象 +其附近的任何元素设置为 z-index：-1 等于总崩溃（在Mac上运行Safari 5.x）。




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.

解决方案

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).

这篇关于Safari + jQuery thickbox =大量的视觉上的毛刺？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！