Safari v5在加载谷歌地图时会隐藏div元素

Question

我在Mac上使用Safari v5时遇到了问题。当我的Google地图API加载到页面中时，它会隐藏一些我的其他div（这些div是绝对定位的）。页面在加载地图之前可以正确呈现。如果我有一个没有地图的页面，这个问题就不会发生。

例如：www.morecambe-lodge.co.uk 它似乎还干扰了jquery ui的加载。是否有更好的方法来延迟加载google地图或解决方案。我已经尝试过document ready和window.onload方法，但问题仍然存在。

我已经在Firefox、IE、Chrome和Safari v4中进行了测试，但这个问题并未复制，只在Safari v5中出现。

任何建议都将不胜感激，谢谢。

- Charlie Davey

Answer 1

该bug与z-index无关。我阅读了以下文章：http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190，并通过两个步骤解决了问题。第一步是修改CSS文件中所有"text-indent"的条目值为9999px或者更小。我使用text-indent来制作图标按钮，不论是来自jQuery UI css还是我的css。将其设置超过9999px会导致问题。第二个问题是，在修复text-indent后，出现了模糊字体。以下内容有助于解决这个问题：

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-transform: none !important;
  }

这篇文章提到了这两个问题，但我发现文本缩进需要比建议的更小。

- Dennis Baskin

---

我应该修改这个：不要使用 -webkit-transform: none !important; 这将破坏其他浏览器中地图的各个方面。我刚刚意识到在Chrome中它已经导致我的地图不能拖动了。 - Dennis Baskin

“-webkit-font-smoothing: 子像素级抗锯齿 !important;” 实际上解决了谷歌地图改变我的网站中其他字体的问题……谢谢。现在，“-webkit-transform: none !important;” 在 Safari 上也会破坏平移功能。 - TCB13

我还可以确认，一旦在页面上使用地图，-webkit-font-smoothing: subpixel-antialiased !important; 可以修复 Safari 上的字体问题。 - dakdad

当我第一次看到这个答案时，我实在不敢相信，但事实证明将text-indent从-9999999px改为-99999px对我有效。非常奇怪。 - Matt James

Answer 2

这对我有用：

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-transform: none !important;
  }

- polo

Answer 3

在 Google（http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190）发布的错误中提到需要将元素上的“text-indent: -999999px;”更改为“text-indent: -99999px;”。删除一个9就可以解决问题。

z-index修复没有明显的变化。webkit-transform修复可以正确显示页面，但无法使用地图。无法拖动。

- johnml

Answer 4

一个提示：这似乎是由于使用了 -webkit-transform: translateZ(0px); 堆叠元素所致。一旦禁用/删除它们，背景就会重新出现。

- Ricardo Tomasi

Answer 5

是的，看起来是同样的问题。我也在Google上发布了这个问题。希望能找到原因。

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190

- Charlie Davey