8616

jQuery .height() wrong in Safari

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):

    <li>I tried innerHeight(), outerHeight() and outerHeight(true) instead of height() - no basic difference (slightly different values, but still the problem in Safari).</li> <li>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.</li> </ul>

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

    Answer1:

    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.

Recommend

  • Is there any way to prevent Woocommerce from defaulting to one particular (local pickup) shipping me
  • POST to /likes only works after GET - bug or by design?
  • How to remove file type abbreviations in front of the file names in vs code explorer?
  • finding maximum depth of chapter
  • C++ how to handle tr1 and non-tr1 namespaces in portable code?
  • Mapping C# classes to Lua functions via dll
  • Grails eager fetch doesn't retrieve all data
  • ggplot2 polygon world map centred with limits gives funny edges
  • C# Remove URL from String
  • HTTP Module intercept requests and breaks custom errors configuration
  • Correctly Importing Apache Commons Math Package
  • Entity Framework ObjectContext: Concurrency
  • Want to understand iframe breakout code
  • is it possible to insert a line break in this tooltip?
  • Elasticsearch script query involving root and nested values
  • Why use database factory in asp.net mvc?
  • How do I configure context broker accept post requests from my remote sensor?
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • Google Custom Search with transparent background
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • Android fill_parent issue
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • Javascript Callbacks with Object constructor
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • coudnt use logback because of log4j
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal