Sometimes load or reload causes partial or glitchy layout arrangement

[hobyvh]

In Chrome with page zoom I'm getting pretty random loading behavior for a filter grid. I don't remember this happening before (months or even years ago) so I suspect it might be related to a change in Chrome.

Sometimes on first load and often on forced reload the layout of the grid items stops in a wrong state. One or more of the items has the wrong placement / padding and jostles the other items to the next row. Sometimes this makes a jaggedy wrap between rows, sometimes it clusters them too close together, sometimes they're all spaced too far apart. This can even lead to them all lining up down the left side (left to right language/layout).

However, as soon as I click a filter or resize the window/container div, all the items get arranged properly. Without the page zoomed, it's much more reliable.

I don't currently have time to make a test case for this but here is the js I'm using.

    <!-- Isotope tab filter -->
    <script src="packages/isotope.pkgd.min.js"></script>
    <script src="packages/imagesloaded.pkgd.min.js"></script>
    <script>
        // Isotope configuration
        var grid = document.querySelector('.js-grid');
        var iso;

        imagesLoaded(grid, function () {
            // init Isotope after all images have loaded
            iso = new Isotope(grid, {
                // options
                itemSelector: '.js-grid-item',
                filter: '.Story',
                layoutMode: 'masonry',
            });
        });

        // filter items on click
        document.addEventListener('click', function (event) {
            if (event.target.matches('.js-filter-group > li > a')) {
                var filterValue = event.target.getAttribute('data-filter');
                var grid_filters = document.querySelectorAll('.js-filter-group > li > a');
                [].forEach.call(grid_filters, function (filterTab) {
                    filterTab.parentElement.classList.remove('uk-active');
                });
                event.target.parentElement.classList.add('uk-active');
                iso.arrange({
                    filter: filterValue
                });
            }
        });
    </script>