Reply To: Masonry Chrome Inquiry - CSS-Tricks

September 19, 2013 at 6:40 pm #150651

Participant

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">

    <title>PLUM</title>
    <link href="../../Documents/Unnamed Site 2/PlumRevision.css" rel="stylesheet" type="text/css">
    <style type="text/css"></style>
    <script src="//desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="//masonry.desandro.com/masonry.pkgd.min.js"> </script>
    </head>


    <body>
    <div id="logo">
    <img src="../../Documents/Unnamed Site 2/Plum-Script.png" width="475" height="275"
    class="works">
    </div>

    <div id="navigation">   
      <ul class="nav">
            <li><a href="">About<img src="../../Documents/Unnamed Site 2/About.jpg"></a></li>
            <li><a href="">Work<img src="../../Documents/Unnamed Site 2/Work.jpg"></a></li>
            <li><a href="">Contact<img src="../../Documents/Unnamed Site 2/Contact.jpg"></a></li>
            <li><a href="">Blog<img src="../../Documents/Unnamed Site 2/Blog.jpg"></a></li>
      </ul>
    </div>

    <hr>
    <div id="content" class="js-masonry"
      data-masonry-options='{ "columnWidth":59, "itemSelector": ".item"  }' '{...}'>
      <div id="fit-width" >
     <div class="item img">
          <a href=""> <img src="../../Documents/Unnamed Site 2/stacksracks3.jpg" width="576" height="360"alt="Racks and Stacks" />
        </a><p class="excerpt inner">Racks and Stacks</p></div>
    </div>
    </div>


    <hr>

<script type="text/javascript">

var msnry = new Masonry( container );
// layout Masonry again after all images have loaded
imagesLoaded( container, function() {
  msnry.layout();
});

</script>
    </body>

    <footer>
    <div id="footer">   
        <p> ©2013. </p>
    </div>
    </footer>

    </html>

This is my full html. I moved the script as you said to the end before the closing body tag, and the call I believe was used properly at the beginning of the content div which is comprised in the body in the beginning. Masonry works when I rescale the page and animates properly in firefox, however I still am not able to escape the fact that my images in Chrome/Safari keep overlapping and stacking on initial loading. If all else being correct what else can I do? Perhaps there’s a hack with jquery to reload the page after the initial load and cache?