Mac Safari 5.0.4 bug when using Google Maps API

I have a google map built from the Google Maps API v.3 on a website that I am building. It works fine in all browsers. However, in Safari (for the Mac at least) it is affecting other elements in an odd way. It seems to really only apply to absolutely positioned elements and it may have something to do开发者_如何学C with z-index. Has anyone had any experience with something like this? What did your solution end up being? Sorry I cannot post a URL yet.

Thanks!!

I ended up finding the solution to my problem. It did indeed have to do with z-index. Interesting that it was only happening in Safari, though. Regardless, if anyone else is noticing something odd going on with Safari and google maps it may have something to do with the z-index of an element on your page. That's where I would start. Thanks again!

The solution that worked for me here (as -webkit-transform:none; stops maps and other functions working on a page), was to ajax in the content via jQuery after load.

Hope that helps!

I'm not completely certain what's going on there since you aren't able to post a sample URL, but if nothing is working after you've tried everything, you can report the issue to the Google Maps API team and they can more thoroughly investigate to see what the issue is.

This is indeed a bug, and is not specifically on Google's end, it has to do with z-indexing getting messed up, whenever you use webkit, or so it seems.

There are two fixes for this, hopefully one of them works.

1. This is the preferred fix. Remove the webkit-transform from the DOM element that you load google maps into and set it's z-index to "auto". Also set it's child div to a z-index of "auto". You can do this with CSS like the following:

    #googleMap{

        -webkit-transform: none !important; 
        z-index: auto !important;

        > div{
            z-index: auto !important;
        }

2. Remove the z-index value for every absolutely positioned element on your page that has one (apart from the Google Maps z-indexes), i.e. set z-index for all absolute positioned elements to z-index: auto.

I had experienced the exact same problem as described by the thread starter. In my case the whole navigation disappeared (navigation wrappers seems to be a popular div to mess with in this case, after some research). When I rid the Google Map div from the site the navigation showed up like it should.

Anyway, my solution was to add a direct style to my Google map div:

<div id="map" style="-webkit-transform: none; z-index: 10;"></div>

And that solved my case. Hope it might help someone out there!

Removing the translate globally broke other functionality in our app. It did however point us in the right direction. This solution worked for us. We moved all the map pin elements back up to the 103 layer.

div[id*='marker_div_']{
-webkit-transform: translateZ(103px);

}

I experienced this same problem in Safari. In my safari it was causing my font on the affected div to become very thin and undefined. The cause I found was that the affected div was casting a shadow onto the div containing google maps. If I remove the drop show the issue is resolved.