谷歌地图API的Safari杀CSS动画 [英] Google Maps API killing CSS animations in Safari

问题描述

我有一些CSS动画的页面。此页面还必须通过谷歌地图API生成地图。

您可以在这里看到一个精简的演示：

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

如果您单击切换尺寸大小链接的前的悬停在主导航项目，你会看到切换元素调整预期。

然而，一旦你将鼠标悬停在导航元素，它应该通过CSS触发弹出菜单，不但不会出现弹出菜单，切换尺寸链接将停止工作。

如果这还不够多，Web检查的认为的一切工作正常 - 它报告的方块的大小的是的变化，目测是没有。

我试图隔离在iframe地图，我也得到了同样的结果。

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

我试图在这个问题上的建议：<一href=\"http://stackoverflow.com/questions/6163975/jquery-jscrollpane-issue-conflict-with-google-maps-on-safari\">jQuery JScrollPane的问题/与Safari浏览器谷歌地图冲突

......而在这其中：<一href=\"http://stackoverflow.com/questions/5305680/mac-safari-5-0-4-bug-when-using-google-maps-api\">Mac Safari浏览器5.0.4错误使用谷歌地图API 时

有什么我可以做什么？

解决方案

使用过的游乐设施上面提到的（可见性：可见;＆安培; -webkit-tranistion：不透明度...;）这似乎为我工作<。 / p>

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

I have a page with some CSS animations. This page also has a map generated via the Google Maps API.

You can see a stripped down demo here:

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

If you click the "Toggle Size" size link before hovering over the "Main Nav Item" you will see the toggled element resize as expected.

However, once you hover over the nav element, which should trigger a flyout menu via CSS, not only does the flyout menu not appear, the "Toggle Size" link stops working.

As if this weren't odd enough, the web inspector thinks everything is working as normal — it reports that size of the box is changing, when visually it is not.

I have tried isolating the map in an iframe, and I get the same results.

This seems to happen only in Safari (5.1.5) / Mac, not in any other browser that I've checked (latest Chrome / Firefox / Internet Explorer 9).

I have tried the suggestions in this question: jQuery jScrollPane issue/conflict with Google maps on Safari

... and in this one: Mac Safari 5.0.4 bug when using Google Maps API

Is there anything I can do?

解决方案

With the over-rides mentioned above (visibility:visible; & -webkit-tranistion:opacity...;) this seems to work for me.

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

这篇关于谷歌地图API的Safari杀CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！