Masonry.js problems with the adaptability and display of Firefox and Opera

Just want to note – Masonry.js has no display issues in Firefox, Opera and even IE. All displaying errors that usually occur occur because of incorrect (or unnecessary) styles remaining from a previous layout.

In one of the projects I faced a problem – Masonry grid.js in Firefox and Opera browsers was not displayed correctly-blocks overlapped each other.

By trial the solution was found. If You in these browsers there is such a problem, but in Chrome everything works normally most likely the problem is in the styles. In my case, I had to remove all the old grid styles and remember to add the standard styles recommended for connecting Masonry.js:

The next problem is the incorrect display of the grid occurred in blocks which loaded advertising blocks.

The script processed them before the contents of the block were loaded and, as a result, the whole structure was broken. You can fix this problem by running script initialization after the page loads:

With this connection, you will avoid problems with incorrect boot sequence.

Also, to avoid the problem, when the page is rendered gradually (especially on sites loaded with multimedia content), and the visitor is given the first page, which is not processed masonry script.js and the markup looks pretty awful, and then everything will melt into place would not recommend to use in the initialization script parameter:

It is better to move all indents to CSS:

Using this method, the initial markup – before processing by the script – will be as similar as possible to the end result, and gradual processing will not be so noticeable.

Here are a few nuances and problems that can be encountered when using Masonry.js. I hope the tips will help you master the wonderful plugin faster and make your sites even more beautiful.


Leave a Reply

Your email address will not be published. Required fields are marked *