jQuery .height() problem with chrome

Question

I've been using jQuery Height function. But there was a problem in getting the correct height of my div element. This div element's height is set to auto, which means the div's height depends only on the elements inside of it. When I tried using the .height() in my page, I got the following result:

Chrome: 1276 px
Firefox: 1424 px

But when you see them both they have equal height. The only thing is that the height() function returns different result.

Here's the code:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;">
    <div>Sample Inside Element</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
     var less_height = $('.single-mid').height() -10;
     $('.single-mid').height(less_height);
});
</script>

But I tried to set the div's height into 1424px. Both browser return the same result.

Any ideas? Thanks in advance.

Chibcha

Please provide a link or demo. – Stationer

i haven't yet uploaded to live site. I currently working on it on the localhost. – Chibcha

Answer 1

Had the same issue. But if I did a brief setTimeout delay before doing the hight check, chrome started reporting the same height as firefox. It seems chrome triggers the document ready state before fully determining how the content will alter the actual size of the container...!? In any case, my fix was to change my:

$(document).ready( ...

to a:

$(window).load( ...

which doesn't trigger until "all sub-elements have been completely loaded" (from http://api.jquery.com/load-event/).

Langue

Thanks Kory!!! This is simplest fix of all, and it avoids a bunch of cheesy, verbose html to explicitly define div heights. You made my day. – Cowberry

Answer 2

It seems to be caused by the different default font in the two browsers. If you add the following CSS to your example, the result will be the same for both Firefox and Chrome/Iron:

<style type="text/css">
  div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
  }
</style>

You could probably use a CSS reset and define the styles yourself. This would give you more control on how to get it to look the same in most browsers.

Manon

I second Gert. If you don't play with font-sizes with percentages, it works fine. – Ariannearianrhod

Answer 3

This happened to me and the reason what that some images in the div that I was calculate the height of did not have the height attribute set.

$(window).load( did work for me, but caused too much of a delay for what I wanted to do.

Amphiarthrosis

Answer 4

Try two method to fixed height in chrome and IE

jQuery(document).ready(function() {
   // your code here
});

And

jQuery(window).load(function(){
  // your code here
}); 

Florilegium

Answer 5

I had the same issue with bootstrap dropdown menu that elements had to be height normalized. For some menus (not all), jquery did not return the right height, resulting in bad normalization. It was because dropdown menus were hidden during the normalization. It seems that CHROME and FIREFOX does not compute the height correctly when the element is hidden. IE seems to work better in this case.

To solve the issue, I have add (then remove) the bootstrap class "open" to all menus, in order to make them visible during the normalization:

    $(window).on( "load resize orientationchange", function() {
        $(".dropdown").addClass("open");
        normalize_all();
        $(".dropdown").removeClass("open");
    });

Midinette

Answer 6

I had the same issue, while using font from Google Fonts and it had implicitly set line-height of 1.5em, which the jQuery probably did not see. Once I explicitly wrote line-height:1.5em to my CSS reset (or website font setting), it was OK.

Sinkhole