Google Maps API 在 Safari 中杀死 CSS 动画

Posted 2023-03-06

【中文标题】Google Maps API 在 Safari 中杀死 CSS 动画

【英文标题】：Google Maps API killing CSS animations in Safari

【发布时间】：2012-05-20 21:57:24

【问题描述】：

我有一个带有一些 CSS 动画的页面。此页面还有一张通过 Google Maps API 生成的地图。

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

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

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

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

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

我尝试将地图隔离在 iframe 中，得到了相同的结果。

这似乎只发生在 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

有什么我可以做的吗？

【问题讨论】：

那里发生了很多事情。在检查器中玩过之后，如果您将“-webkit-transition”从 ALL 更改为不透明度（并删除可见性：隐藏；）它似乎对我来说在 Safari 中有效。 ?

你能用绝对链接把它扔在小提琴上吗？这将使戳戳变得超级容易:)

完整模板有更多的动画实例被破坏，看起来消除可见性因素已使所有动画恢复到完全健康状态。

【参考方案1】：

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

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

【讨论】：

w00！我的第一个 SO 回答 脸红