Safari v5 hides div when google maps loaded

问题:

I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.

example: www.morecambe-lodge.co.uk

it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.

I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.

Any advice would be greeatly apreciated, Thanks.

回答1:

The z-index has nothing to do with this bug.

After I read through the following article: http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190

I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.

The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-transform: none !important;
  }

Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.

回答2:

this work for me :

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-transform: none !important;
  }

回答3:

The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.

The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.

回答4:

There is another thread about the same issue: Mac Safari 5.0.4 bug when using Google Maps API

回答5:

yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190

回答6:

A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.