Chrome — jQuery flicker on window resize? (Mac, Not in Safari and FF)

This is a weird one 开发者_开发问答that's been bugging me for a while now. I suspect it's an issue that only cropped up in the latest release as I've only noticed it now.

I've created a site for my client that works with a browser size aware grid, both in terms of floating divs and image size.

If you open up the site here and here(ps not 'live' yet, just about to send it to the root) in Safari or FF and change the size of your browser, you will notice that it smooths the images perfectly, and the sizing is silky.

With Chrome, it's like it's an IE6 party in 2002... it's jumpy and the images don't even smooth out. Quite a let down as i love Chrome and it alwasy seems to beat the rest when it comes to these details.

I'm sure this is a browser bug, but I'm hoping a jQuery pro out there might know of a way to temper Chromes output.

On the other hand, submiting a chrome bug is like entering a complex maze, i have no idea where to correctly submit such a bug, anyone know how one goes about this in the best way so it's gets the right attention?

Looks like a Chrome bug to me. As an alternative, you might try using CSS3 Media Queries (supported by the newest versions of all major browsers; don't know if that causes problems) they're documented here: http://www.w3.org/TR/css3-mediaqueries/ and an example is here: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

I can help you on this. I just solved the same problem for my portfolio site as well. It looks like Chrome is a little ahead of itself on this one. Not quite sure if it's a bug, but I found the fix.

When you resize the view port, the time between grabbing the window width in the function and the executing the function is just enough to make the actual window size just smaller than the math it takes to add up (4 columns at 110.25pixels in a window that is 440 pixels wide). That extra pixel causes the column to wrap.

So the fix?

On the wrapping container that is the maximum width around the columns, set the width of the parent element. By doing this on resize as well (and not just grabbing the window size then setting the width of the column), it lets the math catch up to the proper window size.

Here is a JS fiddle demonstrating: http://jsfiddle.net/Lr2Fh/

JS:

 $(function(){
  var maxWidth = $(window).outerWidth();

  function totalWindow(){
    $maxWidth = $(window).outerWidth();
    $('#columns').css({
      'width' : $maxWidth + 'px'
    });
  }

  function resizeColumns(){
    var $col = $('.col');
    var $numCol = $col.length;
    $maxWidth = $(window).outerWidth();
    var colSize = $maxWidth / $numCol;

    $col.css({
      'width' : colSize + 'px'
    })
  }

  totalWindow();
  resizeColumns();

  $(window).resize(function() {
      totalWindow();
      resizeColumns();
  });
});

HTML:

<div id="columns">
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
</div>

CSS

#columns {
position:absolute;
}

#columns .col {
position: relative;
float:left;
zoom:1;
}