Trick browser into resizing the viewport dimensions by 1px

Question

I created a website gallery using Masonry, and the site works perfectly fine across all browsers locally. However, when I uploaded it to the server, the images collapse on themselves. The problem is resolved when I resize the browser; this could be as small as a one pixel change.

Is there a way to fool the browser into thinking the viewport has been resized by a pixel immediately after loading the document?

Answer 1

No need to 'trick' the browser.

Reinitialize your masonry plugin within a document.ready() Code that lives within a $(document).ready() is only run when the page has finished loading.

$(document).ready(function(){

  var container = document.querySelector('#container');
  var msnry = new Masonry( container, {
    // options...
    itemSelector: '.item',
    columnWidth: 200
  });

});

Masonry is reinitialized on the resize event which occurs when you resize the browser that's why it's fixed when you do that.

---

If you're not using jQuery, try to use window.onload() which is pretty much the same thing.

window.onload = function(){
  //code to be run after page is loaded goes here
}