加载谷歌地图时，Safari v5 隐藏 div答案

【问题标题】：Safari v5 hides div when google maps loaded加载谷歌地图时，Safari v5 隐藏 div
【发布时间】：2012-05-24 05:37:53
【问题描述】：

我在 mac 上遇到 Safari v5 的问题。当我的 Google Map Api 加载到页面中时，它会隐藏我的一些其他 div（它们是绝对定位的）。在地图加载之前，页面会正确呈现。如果我的页面没有地图，则不会发生问题。

它似乎也干扰了 jquery ui 的加载。有没有更好的方法来延迟加载谷歌地图或解决方案。我已经尝试过 document ready 和 window.onload 方法，但问题仍然存在。

我已经在 Firefox 中进行了测试，即 chrome 和 safari v4，这个问题没有被复制，似乎只发生在 safari v5 中。

非常感谢任何建议，谢谢。

【问题讨论】：

【解决方案1】：

z-index 与这个 bug 无关。

我可以通过做两件事来解决我的问题。第一个是修改我的 CSS 中具有“text-indent”的每个条目，使其值为 9999px 或以下。我对所有图标按钮都使用文本缩进，无论它来自 jQuery UI css 还是来自我的 css。设置超过 9999 像素给我带来了问题。

修复文本缩进后的第二个问题是字体模糊。以下帮助解决了这个问题：

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

文章中都提到了这两个，但我发现文本缩进需要小于建议的值。

【讨论】：

我应该修改这个：不要使用 -webkit-transform: none !important;它会破坏其他浏览器中地图的各个方面。我刚刚意识到我的地图不再是可拖动的，因为它在 chrome 中。
-webkit-font-smoothing: subpixel-antialiased !important; 实际上解决了谷歌地图改变我网站中其他字体的问题......谢谢。现在，-webkit-transform: none !important; 也在 Safari 上打破了 pan。
我还可以确认，一旦在页面上使用地图，-webkit-font-smoothing: subpixel-antialiased !important; 正在修复 Safari 上的字体问题。
老实说，当我第一次阅读这个答案时，我并不相信它，但事实证明 -9999999px 的文本缩进更改为 -99999px 对我有用。奇怪。

【解决方案2】：

这对我有用：

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

【讨论】：

【解决方案3】：

Google 上发布的错误 (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) 提到更改“text-indent: -999999px;”到“文本缩进：-99999px；”关于元素。放弃一个 9 解决了我的问题。

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

【讨论】：

【解决方案4】：

是的，看起来同样的问题。我也在谷歌上发布了这个问题。希望能查到真相。

【讨论】：

【解决方案5】：

一个线索：似乎是元素堆叠导致的 -webkit-transform: translateZ(0px);一旦您禁用/删除它们，背景就会重新出现。

【讨论】：