Really mysterious DOM issues in Chrome

Bear with me, this is going to be extremely difficult to explain, and I can't really show much code because I'm not sure I wanna dump all this development code which is going to be used on a major national web site.

I have four LI tags that, upon $(window).load(), are being cloned into DIVs, and then the heights of the DIVs are fetched with an $.each() loop. The problem I'm running into is, in most browsers on various OS's, the heights are consistent, except Chrome on Linux and Mac. I'll elaborate a bit more.

Each LI contains some text and some other divs, just general content basically. And I'm using $.contents().clone() to clone each LI and put it in a DIV, where it is styled differently. This is how that particular part works and it cannot change.

OK, jQuery code time:

$(window).load(function() {

    $('.carousel-thumb').each(function(i) {
        var $story = $(this).contents().clone();

        // Remove all <script> tags before appending, otherwise we're looking
        // for trouble
        $('script', $story).remove();

        $story.appendTo('#featured-story')
            .wrapAll('<div class="carousel-sto开发者_如何学编程ry" />');
    });

    // Fix the sizing on the featured story container
    $('.carousel-story').each(function(i) {
        console.log('story ' + i + ' = ' + $(this).height());
        if ($(this).height() > storyMaxHeight)
            storyMaxHeight = $(this).height();
    });
    /*$('.carousel-story').height(storyMaxHeight);
    $('#featured-story').height(storyMaxHeight);*/
});

I'll answer one potential question that might arise from this. What's with the removal of the script tags? The original LI tags contain various content, including inline scripts. I noticed when I cloned this content, it wreaked havoc on the page structure. Not sure if the scripts were executing again or what, but removing the scripts (especially since they'd already been executed) solved the problem.

Now, check out this interesting tidbit. This graphic contains Windows Chrome on the left, and Linux Chrome on the right. Note that Linux/Mac Chrome both misbehave.

Isn't THAT odd? During the execution of the script, the heights are completely wrong in Linux. Yet, after everything is completely done and I manually request the height of the third div, it reports the height properly! Yet the behavior on the left (correct) is exhibited by Windows Chrome as well as Firefox on all platforms, even IE7.

Is there some weird delay in the clone() call? Does cloning a bunch of content take some time, and the jQuery script continues to execute and hence grabs the wrong heights? Is there a way to pause, to make sure all content has been cloned properly?

Thanks. I'm really pulling my hair out over this one.

Apparently it's a bug in Chrome and Safari that surfaces randomly. These browsers will sometimes trigger the load() function before all images/media are done loading. One person recommends this fix/hack:

jQuery(window).load(function(){
  if (jQuery.browser.safari && document.readyState != 'complete'){
    // chrome / safari will trigger load function before images are finished
    // check readystate in safari browser to ensure images are done loading
    setTimeout( arguments.callee, 100 );
    return;
  }
  // do things you want to do
});

Source: http://javascript.livejournal.com/169501.html