css - Google Maps API 在 Safari 中杀死 CSS 动画

Question

我有一个包含一些 CSS 动画的页面。此页面还有一张通过 Google Maps API 生成的 map 。

你可以在这里看到一个精简的演示:

http://dev.timmurtaugh.com/demo/projects-map-debug.html

如果您在鼠标悬停在“主导航项”上之前单击“切换大小”尺寸链接，您将看到切换元素按预期调整大小。

但是，一旦您将鼠标悬停在 nav 元素上，它应该通过 CSS 触发弹出菜单，弹出菜单不仅不会出现，“切换大小”链接也会停止工作。

好像这还不够奇怪，网络检查器认为一切正常——它报告说盒子的大小正在变化，而在视觉上它是不是。

我曾尝试在 iframe 中隔离 map ，但得到了相同的结果。

这似乎只发生在 Safari (5.1.5)/Mac 中，而不发生在我检查过的任何其他浏览器(最新的 Chrome/Firefox/Internet Explorer 9)中。

我试过这个问题中的建议:jQuery jScrollPane issue/conflict with Google maps on Safari

... 在这一个中:Mac Safari 5.0.4 bug when using Google Maps API

有什么我可以做的吗？

Answer 1

有了上面提到的覆盖 (visibility:visible; & -webkit-transition:opacity...;) 这似乎对我有用。

http://jsfiddle.net/vxfhT/1/