Masonry Tiles Out Of Order

[Johnnh]

First up, great product. Looks amazing on a website.

I have a website at the below url that uses masonry.

http://www.butterscotchdesign.com/work/

The 8th image 'Deborah Goodchild - Sketched tall house and tree' unexpectedly swaps it's order with the Garden Gent image and breaks the expected layout as you resize the window.

I can reproduce this consistently across all browsers and am wondering what I am doing wrong?

The set up is as follows:

$(document).ready(function() {

    var $grid = $('.grid').masonry({

      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.grid-item',
      // use element for option
      columnWidth: '.grid-sizer',
      transitionDuration: 0,
      percentPosition: true

    })

    $grid.imagesLoaded().progress( function() {

        $grid.masonry('layout');

    });

});

Any ideas would be greatly appreciated.

Thanks for your time and help with this.

[desandro]

Thanks for reporting this issue. This is well known issue with pixel rounding differences between JS and CSS. See possible solution in #811. Closing here, keep discussion there.