Strange div height error: webkit or jQuery bug?

Question

I have a simple web page application that has two floated content divs side by side..

A little piece of jquery sets the height of these divs by looking at the height of the parent div and doing a simple calculation

This approach works great in Firefox and IE.. and it also works the first time in Safari and Chrome...

But when the page is reloaded in Safari or Chrome.. the right and lefts div's magically increase their height by about 200px for no reason.

Do a hard refresh.. and the div heights go back to normal

Please advise! this is very strange -

<div class="holder1"  > 

<!--      LEFT HAND BOX     --> 

<div id="left-box" class="half left"> 
<div class="info-box">  
<h2>Left Hand Content</h2>  


 ------------- Left content here----------------------

</div>  
</div> 

<!--      RIGHT HAND BOX     -->

<div id="right-box" class="half right" >
<div class="info-box">  
<h2>Right Hand Content</h2> 

 -------------Right content here----------------------      

</div>      
</div> 

<div class="clearfix"></div>    
</div> 

<!--    END RIGHT and LEFT BOXES    -->

<div>   more content here  </div>

     <script language="javascript"> 
            var new_height =  $('#left-box').closest('.holder1').height() -25;
            $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);

    </script>

Or, even better, post your code (JS, HTML and CSS) on [jsFiddle](http://jsfiddle.net/). (Make sure you select jQuery instead of MooTools.) — , Mar 14 '11 at 17:19

score 0 · Answer 1 · answered May 29 '12 at 16:53

I think I found the solution. I had a similar problem trying to change the height of a DIV (containing floated DIVs) based on the parent DIV height (that had height auto). It was working great with IE, but not with Chrome. In Chrome, the parent DIV didn't even had the proper height, like if Chrome didn't count the floated DIV as part of the parent DIV.

To fix the problem, I had to change the style of the parent DIV in adding "float:left" to make it "float" as well. In your CSS code, it would be:

.holder { border:red dotted 1px; float:left }

See, now we see the red dotted parent DIV: http://jsfiddle.net/bytKE/46/

score 0 · Answer 2 · edited May 23 '17 at 11:52

This jQuery issue of Webkit failing to detect the height of an element after a reload or refresh has been around for some time. These possible solutions are worth trying though:

Method 1

Try using jQuery(window).load instead of jQuery(document).ready, e.g.:

jQuery.noConflict();
jQuery(window).load(function() { // <--

    var myheight = jQuery(".mydiv").height();
    jQuery(".this-div-uses-calculated-height-as-padding").css( "padding-top", myheight ); 

});

Source

Method 2 (supported by over 90%+ of browsers, though not IE8)

If the above approach causes some issues between Webkit and other browsers, consider using this:

document.addEventListener("DOMContentLoaded", function(event) { 
    // your script
});

Source

Method 3 (not an elegant one, but it has the highest chance of working properly on all browsers)

And if even that is not working it, you coùld try a less clean way by detecting the browser first, and then applying the script dependent whether it's webkit or not:

jQuery.noConflict();

isWebkit = /(safari|chrome)/.test(navigator.userAgent.toLowerCase());

if (isWebkit){
    jQuery(window).load(function() { // <--            
         // your script    
    });
}

else{
    jQuery(document).ready(function() { // <--
        // your script
    });
}

Another approach may be to make sure to include any CSS files before the inclusion of the jQuery file.

score 0 · Answer 3 · answered Mar 14 '11 at 17:19

0

Are you sure the DOM is built when javascript is running ? Try

 <script type="text/javascript">
    $(function() {
        var new_height =  $('#left-box').closest('.holder1').height() -25;
        $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);
    }
</script>

answered Mar 14 '11 at 17:19

MatTheCat

16,312
6
52
66

good point ..but I have duplicated this error using (document).ready or jQuery wrapper function that waits for dom load so that's not it unfortunately – stebbin45 Mar 14 '11 at 17:42

score 0 · Answer 4 · answered Mar 14 '11 at 18:08

0

Try this, it works for me:

 <script type="text/javascript">
    jQuery(function($){
        $('.holder1 > .half').each(function(){
            var height = 0, actual_height;
            var actual_height = $(this).height();
            if(actual_height > height){ height = actual_height; }
            $('.holder1 .info-box').height(height);
        });
    });
</script>

answered Mar 14 '11 at 18:08

Jepser Bernardino

1,163
1
11
22

I like where you are going with this but I'm not sure your code allows an adjustment of the size of the two R/L boxes relative to the containing div.. which whas the original intent.. when I put a border around the parent div.. it seems to have a height of zero.. here's a new fiddle.. [http://jsfiddle.net/bytKE/](http://jsfiddle.net/bytKE/) – stebbin45 Mar 14 '11 at 20:23

score 0 · Answer 5 · answered Mar 14 '11 at 22:10

0

thanks for all the ideas.. it seemed to help most when I update the jQuery include from 1.4 to 1.5..

here's a fiddle that works for me in FF, IE, Safari and Chrome..

http://jsfiddle.net/bytKE/11/

answered Mar 14 '11 at 22:10

stebbin45

109
10

just realized one problem with this approach to div heights.. if the user resizes the browser.. it trashes the layout.. so I'll need to add some code that triggers a div resize on a window dimension change or similar.. – stebbin45 Mar 14 '11 at 23:20

Strange div height error: webkit or jQuery bug?

5 Answers5