Safari v5 hides div when google maps loaded

Question

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.

Answer 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.

Answer 2

this work for me :

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