谷歌地图API在Safari中破坏了CSS动画

Question

3

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

您可以在此处查看简化演示：

如果您在悬停“主导航项”之前点击“切换大小”链接，则会看到切换的元素按预期调整大小。

然而，一旦您悬停在导航元素上，这应该通过CSS触发一个弹出菜单，不仅弹出菜单不会出现，“切换大小”链接也停止工作。

更奇怪的是，Web检查器认为一切正常——它报告盒子的大小正在改变，但实际上并没有。

我尝试将地图隔离在iframe中，但结果相同。

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

我能做些什么吗？

- Tim

那里发生了很多事情。在检查器中玩耍后，如果将“-webkit-transition”从ALL更改为仅Opacity（并删除visibility:hidden;），它似乎对我在Safari中起作用。 - folktrash

你能把这个放到 Fiddle 上并使用绝对链接吗？这样就可以轻松地进行调试了 :) - folktrash

完整的模板中有更多破损的动画实例，看起来消除可见性因素已经使它们全部恢复健康。 - Tim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- folktrash · Accepted Answer

通过上述的覆盖（visibility:visible; & -webkit-tranistion:opacity...;），这对我来说似乎是有效的。