CODEWITHSUNDEEP
jqueryhtmlcssjquery-masonry
Spokes
Spokes

Reputation: 126

Masonry grid layout plugin generating vertical gaps when used with custom font

I'm using the jquery plugin "Masonry" to arrange divs/cells in a grid on my front page. Each of those divs contains an upper div with an image, and a lower div with some text. The plugin is applied basically like this:

function use_masonry() {
        var container = document.querySelector('#container');
        var msnry = new Masonry( container, {
            transitionDuration: '0.2s',
            isResizeBound:false,
            gutter: 10,
            gutterY:0,
            itemSelector: '.divs_to_be_arranged'
        });
}

EDIT: the function is being called like this:

//called when page loaded/reloaded
$("img").load(function() {
    use_masonry();
});

$( window ).resize(function() {
    use_masonry();
});

There is CSS that uses implements a custom font:

@font-face {
  font-family: 'leaguegothic-regular';
  src: url('fonts/leaguegothic-regular-webfont.eot'); /* IE9 Compat */
  src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/leaguegothic-regular-webfont.woff') format('woff'), /* Modern Browsers */
       url('fonts/leaguegothic-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/leaguegothic-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Sometimes, when the page is first loaded (i.e. the cache is clear), the Masonry plugin generates the grid more or less as it should, except that instead of having even X and Y dimension gutters, some of the vertical gutters are larger than they should be.

When the pages is reloaded or if the window is resized, this problem no longer occurs. If the browser's cache is cleared, the problem sometimes occurs again. It seems that the problem disappears when the custom font is not used.

Any ideas on what could be going on and how to resolve it?

Upvotes: 1

Views: 605

Answers (1)

RaphaelDDL
RaphaelDDL

Reputation: 4480

Your custom font is wider and/or taller than the normal font, therefore when Masonry calculates the width/height of the boxes, it does before your font is downloaded/applied and that screws the calculation.

A workaround is bind your use_masonry to the document load instead of ready, this way it will work as expected with your font. For example (considering you are using jquery):

$(document).on('load',function(){
    use_masonry();
});

or vanilla:

document.onload = use_masonry;

Or use waitForWebfonts() function with use_masonry() inside (also inside of this same question, there are other cool ways of knowing when the font has been successfully loaded, like WebFont Loader, etc.)

Upvotes: 2

Related Questions