Masonry images overlapping issue with rails 3 + turbolinks + Mozilla

Question

I have a new and slim website with masonry and rails 3 and turbolinks.

The website is working fine with all browsers except with mozilla firefox.

The images are overlapping/superimposed on mozilla firefox, but on other browsers the website is working fine.

On google chrome is working fine with turbolinks.

How can I fix this problem with mozilla firefox?

Answer 1

Thank you, after several hours I was able to solve the problem with a new code for masonry because with $('#page').masonry('reload');

I get on console:

cannot call methods on masonry prior to initialization; attempted to call method 'reload'

So, the final that is working for me is a new masonry code with:

$(document).on('page:load', function(){
   $('#page').waitForImages(function(){
    finished: function() {
      var $container;
      $container = $("#page");
      $container.imagesLoaded(function() {
       return $container.masonry({
       .
       .
       //options here
       });
     });
   }, 
   waitForAll: true
 });
});

You can download minified waitForImages plugin for here:

https://raw.github.com/alexanderdickson/waitForImages/master/dist/jquery.waitforimages.min.js

This is waitForImages page:

https://github.com/alexanderdickson/waitForImages