jQuery .height() wrong in Safari

Question

I have a problem reading out the correct height of a DIV with jQuery in Safari. I am using jQuery("#x").height() to read out the height of the element. In the real situation, I use the result later on in the page. It works well in Chrome, Firefox and IE, but not in Safari.

Here is some code that I have extracted from my page that demonstrates the problem:

The 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;
}

(some parameters seem superfluous or strange, but I need them in my context and it doesn't change the problem if I leave them out)

HTML:

<div id="x">
  <h2>Header</h2>
  <div class="y">
    <img src="https://placehold.it/330" alt="my image">
  </div>
  <p class="z"><span>Some text</span><br>Some more text...</p>
</div>

Now, with this jQuery code I am getting different results depending on the browser:

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

I put all this into a codepen: http://codepen.io/anon/pen/MyELJV?editors=1111

If you load it in Firefox, the console output is 469. If you load it in Safari, it's 154. (addition: in both Chrome/MacOS and in IE11/Win7 the value is 466). Some small part of the difference is due to different default styles, but the main problem is that Safari doesn't take the image into account when getting the height.

If tried different things (that didn't solve the problem):

• I tried innerHeight(), outerHeight() and outerHeight(true) instead of height() - no basic difference (slightly different values, but still the problem in Safari).
• I added width=330 heigth=330 as attributes to the img tag, it works in the codepen, but not in my real situation (with another image). Apart from that, the whole thing is responsive, so I'd like to omit these attributes anyway.

By the way: The original images are all 330x330px (i.e. all have aspect ratio 1:1), but they are scaled down on smaller screens.

I'd be very grateful for a solution...

Answer 1

I changed your css so that safari doesn't change height of image.

#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;
}

Also use load function to fetch exact height of #x.

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

You can refer the changed code here.