Mac Safari 5.0.4 error al utilizar Google Maps API

Question

tengo un mapa de Google construido a partir de la versión 3 del API de Google Maps en un sitio web que estoy construyendo. Funciona bien en todos los navegadores. Sin embargo, en Safari (para Mac al menos) está afectando a otros elementos de una manera extraña. Parece que realmente solo se aplica a elementos absolutamente posicionados y puede tener algo que ver con z-index. ¿Alguien ha tenido alguna experiencia con algo como esto? ¿Cuál fue tu solución? Lo siento, todavía no puedo publicar una URL.

Gracias!

Answer 1

Terminé encontrando la solución a mi problema. De hecho, tenía que ver con el índice z. Sin embargo, es interesante que solo estuviera sucediendo en Safari. De todos modos, si alguien más está notando que algo extraño sucede con Safari y Google Maps, puede tener algo que ver con el índice Z de un elemento en su página. Ahí es donde comenzaría. ¡Gracias de nuevo!

Answer 2

Hay otra, posterior más detallada sobre este: Safari v5 hides div when google maps loaded

Answer 3

No estoy completamente seguro de lo que está pasando allí, ya que no son capaces de publicar un ejemplo de URL, pero si no está trabajando después de haber lo intenté todo, puede report the issue al equipo de la API de Google Maps y pueden investigar más exhaustivamente para ver cuál es el problema.

Answer 4

Este es de hecho un error, y no es específicamente en el extremo de Google, que tiene que ver con z-indexación de conseguir en mal estado, cada vez que utilice webkit, o eso parece.

Hay dos soluciones para esto, con suerte uno de ellos trabaja.

1. Esta es la solución preferida. Elimine la transformación webkit del elemento DOM en el que carga google maps y configure su índice z como "automático". También configure su div secundaria a un índice z de "auto". Esto se puede hacer con CSS como la siguiente:

#googleMap{ 

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

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

2. quitar el valor z-index para cada elemento con posición absoluta en su página que tiene uno (aparte de los mapas de Google índices de z), es decir, establecer z-index para todos los elementos posicionados absolutos en z-index: auto.

Answer 5

que había experimentado el mismo problema como se describe por el hilo de arranque. En mi caso, toda la navegación desapareció (las envolturas de navegación parecen ser una división popular con la que lidiar en este caso, después de algunas investigaciones). Cuando eliminé el mapa de Google div del sitio, la navegación apareció como debería.

De todos modos, mi solución fue añadir un estilo directo a mi mapa div Google:

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

Y que resolvió mi caso. Espero que pueda ayudar a alguien por ahí!

Answer 6

Extracción de la mundialmente traducir rompieron otra funcionalidad en nuestra aplicación. Sin embargo, nos indicó la dirección correcta. Esta solución funcionó para nosotros. Movimos todos los elementos de pin de mapa a la capa 103.

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

}

Answer 7

La solución que funcionó para mí aquí (como -webkit-transform: none; detiene mapas y otras funciones de trabajo en una página), fue al Ajax en el contenido a través de jQuery después de la carga.

Espero que ayude!

Answer 8

Experimenté este mismo problema en Safari. En mi safari causaba que mi fuente en el div afectado se volviera muy delgada e indefinida. La causa que encontré fue que el div afectado estaba arrojando una sombra sobre el div que contenía Google Maps. Si elimino el show drop, el problema se resuelve.