CODEWITHSUNDEEP
cssgoogle-mapsanimationsafari
Tim
Tim

Reputation: 285

Google Maps API killing CSS animations in Safari

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?

Upvotes: 3

Views: 712

Answers (1)

folktrash
folktrash

Reputation: 186

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

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

Upvotes: 1

Related Questions