Masonry and Jetpack Infinite Scroll – overlap issue

I have now solved point (2), the overlapping posts problem; maybe this will help someone else.

I changed wrapper to true in the mytheme_jetpack_setup function in my PHP (so that the new posts are wrapped in their own div)

And I changed the jQuery to:

    $('#content').masonry({
      columnWidth: '.grid-sizer',
      itemSelector: 'article',
      gutter: '.gutter-sizer'
    });

    var infiniteCount = 1;
    $( document.body ).on( 'post-load', function () {
        var elements = $('.infinite-wrap.infinite-view-' + infiniteCount + ' article');
        $('#content').masonry( 'appended', elements );
        infiniteCount++;
    });

EDIT: I have also solved point (1) now too via CSS, can’t believe it took me so long to realise that’s all it needed. I added some padding-bottom to my Masonry/Jetpack container (in my case #content) and set the following in the CSS:

#content #infinite-handle {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding-bottom: 2em;
        }

This positions it below the grid items and centers it too. Hope it helps someone maybe. You could do a similar thing with #infinite-loader too.