Question

我需要帮助确定我的某个生产网站出现严重视觉故障的原因。它只发生在Safari - Chrome和所有其他浏览器都很好。

http://www.philanthropicdirectory.org/search

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

jQuery 1.3.2（Drupal base / default）
jQuery 1.4.4（在这里和那里通过将jQuery命名空间覆盖到'$ js'来处理某些高级操作1.3.2无法处理）
jQuery UI 1.7.3
Thickbox 1.8.2.19（我稍微修改了这个.js）

重播：

点击链接（访问页面）：http://www.philanthropicdirectory.org/search
在5个'coverflow'面板中的任意一个上单击两次（一次到中心）以触发Thickbox内容
加载TB内容后，向左或向右水平调整浏览器窗口的大小
注意奇数背景图像和背景颜色偏移
在模态系统右上角的任何5个“标签”图标之间切换
在任何时候，使用Web Inspector取消选中，然后在任何地方重新检查任何CSS属性
注意这是如何立即清除/修复所有视觉故障
再次调整浏览器窗口的大小或在其他选项卡之间切换，并注意毛刺返回。

如果您注意到我的情况相同，那么获取您的机器配置和Safari版本会非常棒。

在
调整大小后
标签后

图像说明了一切，据我所知，我只能通过Safari在以下设置中重现此问题：

MacPro，6核Xeon（2010）
OS X 10.6.8
2台显示器：1x 23“Cinema Display（旧银色）+ 1x 27”Apple Cinema Display
ATI Radeon HD 5770（Mac版本为01.00.436驱动程序）
Safari 5.1 +

我已经使用早期版本的Safari（4.x）测试了其他机器和其他机器，但问题根本不存在。

你认为我能测试出来为什么会发生这种情况吗？

PS：一次只使用一台显示器会产生同样的问题。

Answer 1

<强>解<！/强>

我注意到我们构建的另一个网站发生了这种情况 - 这个网站与Drupal没有任何共同之处，这里有问题，除了这个新网站还有一个Flash（SWF）文件{{ 1}}，我正在将CSS属性应用于具有负body值的元素。

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

object

可以点击与z-index: -1;重叠的元素（否则，object顶部的链接无法与之互动）。

我能够永久修复它，而不是在object

的顶部上设置的任何元素
object

鉴于这个解决方案，我在Drupal网站上搜索了所有“z-index：-1”CSS，确定在每个选项卡上都显示了Thickbox容器中的一个元素 - 大绿色“SEARCH”输入按钮。它的风格是因为视觉需求（与按钮上的虚假内部阴影有关）。

我禁用了此元素的整个z-index: 1; /* or anything > 0 */属性，而且，在Drupal网站上，永久的funkiness消失了。

乌拉！毫无疑问，我在另一个网站上更加敏锐地看到了同样的问题。

现在我不确定Safari背后的确切错误没有经过严格的测试，但我所知道的是页面上的z-index +靠近它的任何元素设置为object等于完全崩溃（在运行Safari 5.x的Mac上）。

Answer 2

我在运行Windows 7的HP Xeon上检查了Safari 5.1（7534.50）。我没有看到任何故障。

这很奇怪。听起来像某种竞争条件。也许您的ATI驱动程序中存在错误？因为它在重新渲染时会自行修复，也许你可以在某个地方引入一些延迟，这可能会让它有更多的时间来正确渲染？

Safari + jQuery thickbox =大量的视觉故障？

2 个答案: