Safari v5 oculta div cuando google maps cargó

Question

Tengo un problema con Safari v5 en mac. Cuando mi Google Map Api se carga en la página, oculta algunos de mis otros divs (que están absolutamente posicionados). La página se muestra correctamente hasta que se carga el mapa. Si tengo una página sin un mapa, el problema no ocurre.

ejemplo: www.morecambe-lodge.co.uk

también parece interferir con la carga de jQuery UI. ¿Hay una mejor manera de cargar perezosos Google Maps o una solución? He intentado documentos listos y métodos window.onload pero aún persiste con el problema.

He probado en firefox, es decir, Chrome y safari v4 y este problema no se reproduce solo parece suceder en safari v5.

Cualquier consejo sería muy apreciado, Gracias.

Answer 1

Hay otro hilo sobre el mismo tema: Mac Safari 5.0.4 bug when using Google Maps API

Answer 2

sí que parece el mismo problema. también he publicado la pregunta en google. con suerte llegaré al fondo del asunto.

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

Answer 3

Una pista: parece que es causada por el apilamiento de elementos con -webkit-transform: translateZ (0px); Una vez que los deshabilite/elimine, los fondos volverán a aparecer.

Answer 4

este trabajo para mí:

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

Answer 5

El fallo publicado en Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) menciona el cambio de "texto-sangría: -999999px;" a "texto-sangría: -99999px;" en elementos. Dejar caer uno 9 me arregló el problema.

Las correcciones de z-index no hicieron cambios perceptibles. Las correcciones de webkit-transform representaban la página correctamente pero dejaban inutilizable el mapa. No fue posible arrastrar.

Answer 6

El índice Z no tiene nada que ver con este error.

Después de leer a través del siguiente artículo: http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190

que era capaz de solucionar mi problema haciendo dos cosas. El primero fue modificar cada entrada en mi CSS que tenía "texto-sangría" para tener un valor de 9999px o menos. Utilizo el texto-sangrado para todos mis botones de iconos, ya sea que proceda de jQuery UI css o de mi css. Tenerlo configurado en 9999px me creó problemas.

El segundo problema, después de que se había solucionado el texto de sangría, era tener fuentes borrosas. El siguiente ayudó a resolver este problema:

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

Ambos son mencionados en el artículo, pero he encontrado que el guión de texto tenía que ser más pequeña de lo que se sugiere.