Infinite Scroll, Isotope Overlapping Safari Bug

In the pervious post on infinite scroll and isotope blog layouts there is a known issue where on safari where when scrolling down the images/elements start to overlap. Metafizzy are aware of this issue and it is listed on their GitHub repository (Here).

I have come up with a word around while we wait for the issue to be fixed.

Work Around

*This fix is for infinite scroll v3
The fix is in JQuery and is based on the example provide in our pervious post on infinite scroll.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        $grid.infiniteScroll({
                path: 'a.pagination__next',
                append: '.grid-item',
                debug: true,
                status: '.infinite-scroll-request',
                outlayer: iso,
                //safari work around
                onInit: function () {
                    this.on('load', function () {

                        $grid.isotope('layout');
                    })
                }
            }
        );

If you have any issues please leave a comment and I will get back to you.

Please check out all our other code snippets Click Here