jQuery .height () incorrecto en Safari

Tengo un problema para leer la altura correcta de un DIV con jQuery en Safari. Estoy usando jQuery("#x").height() para leer la altura del elemento. En la situación real, utilizo el resultado más adelante en la página. Funciona bien en Chrome, Firefox e IE, pero no en Safari.

Aquí hay un código que he extraído de mi página que demuestra el problema:

El CSS:

 #x { position: absolute; top: 0px; margin-top: 80px; right: 54%; width: 40vw; height: auto; max-width: 330px; padding: 10px 3.1vw 16px; background: #ddd; } .y { position: relative; width: 100%; max-width: 330px; height: auto; max-height: 330px; } .y img { width: 100%; height: auto; } 

(algunos parámetros parecen superfluos o extraños, pero los necesito en mi contexto y no cambia el problema si los dejo fuera)

HTML:

 

Header

my image

Some text
Some more text...

Ahora, con este código jQuery, obtengo resultados diferentes según el navegador:

 console.log(jQuery("#x").height()); 

Puse todo esto en un codepen: http://codepen.io/anon/pen/MyELJV?editors=1111

Si lo cargas en Firefox, la salida de la consola es 469. Si lo cargas en Safari, es 154. (Además: en Chrome / MacOS y en IE11 / Win7, el valor es 466). Una pequeña parte de la diferencia se debe a diferentes estilos predeterminados, pero el principal problema es que Safari no toma en cuenta la imagen al obtener la altura.

Si intentaron cosas diferentes (eso no resolvió el problema):

  • innerHeight() , outerHeight() y outerHeight(true) lugar de height() – no hay diferencia básica (valores ligeramente diferentes, pero igual es el problema en Safari).
  • width=330 heigth=330 como atributos a la etiqueta img , funciona en el códec, pero no en mi situación real (con otra imagen). Aparte de eso, todo es sensible, por lo que me gustaría omitir estos atributos de todos modos.

Por cierto: las imágenes originales son todas 330x330px (es decir, todas tienen una relación de aspecto de 1: 1), pero están reducidas en pantallas más pequeñas.

Estaría muy agradecido por una solución …

Cambié tu CSS para que safari no cambie la altura de la imagen.

 #x { position: absolute; top: 0px; margin-top: 80px; right: 54%; width: auto; height: auto; /* max-width: 330px; */ padding: 10px 43px 16px; background: #ddd; } .y { position: relative; width: 100%; max-width: 330px; height: auto; max-height: 330px; } .y img { width: auto; height: auto; } 

También use la función de load para obtener la altura exacta de #x .

 $(window).load(function(){ console.log($("#x").height()); }); 

Puede consultar el código modificado aquí .