Masonry et Jetpack Infinite Scroll - Problème de chevauchement

Question

J'essaie d'implémenter un défilement infini avec la maçonnerie sur mes pages d'archives sur mon thème et j'ai quelques problèmes:

1) Le bouton "Chargez plus de messages" est caché derrière les messages initiaux lorsque vous chargez la page pour la première fois, voir Yellow Circle:

Je me sens un peu stupide pour demander celui-ci, mais je ne sais pas comment résoudre ce problème parce que Jetpack charge le bouton dans le même conteneur que les messages, ce qui est juste le comportement par défaut, et tous les messages sont absolument positionnés à cause de la maçonnerie donc Je ne peux pas clear le bouton contre eux avec CSS. Je veux que le bouton soit en dessous des messages.

2) (résolu, voir ci-dessous la réponse) Lorsque je clique sur le bouton, les nouveaux messages se chevauchent / chargent derrière les messages initiaux, voir l'image:

Je n'arrive pas à amener la maçonnerie à déclencher un relais après le chargement des nouveaux messages. J'ai regardé ce post http://wptheming.com/2013/04/Jetpack-infinite-scroll-masonry/ Et cette question https://wordpress.stackexchange.com/questions/108552/Jetpack-infinite-scroll-masonry-on-twenty-twelve-overlap Mais je n'arrive pas à trouver une solution à mon problème.

Le balisage avant le clic:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

Le balisage généré après le clic:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>                                    

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <span class="infinite-loader" style="display:none">...</span>

            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

Le PHP que j'utilise pour Jetpack (le type de message en question est mytheme_portfolio) :

function mytheme_render_infinite_scroll() {
    while ( have_posts() ) : the_post();
            if ('mytheme_portfolio' == get_post_type()) :
                get_template_part( 'content', 'archive-portfolio' );
            else :
                get_template_part( 'content', get_post_format() );
            endif;
    endwhile;
}

function mytheme_jetpack_setup() {
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'content',
        'type'           => 'click',
        'render'         => 'mytheme_render_infinite_scroll',
        'wrapper'        => false,
        'posts_per_page' => 5,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_jetpack_setup' );

La jQuery:

(function( $ ) {

    $( document ).ready(function() {

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

        $( document.body ).on( 'post-load', function () {
            $('#content').masonry({
              columnWidth: '.grid-sizer',
              itemSelector: 'article',
              gutter: '.gutter-sizer'
            });
        });

    });

}( jQuery ));

Le CSS (bien que je ne pense pas que ce soit le problème car les messages initiaux sont bien) ... compilé avec moins, j'utilise calc() Pour rendre les choses réactives:

article,
.grid-sizer {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(1) + ((1 - 1)*1.5em));
}
article.featured {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(2) + ((2 - 1)*1.5em));
}
.gutter-sizer {
  width: 1.5em;
}

Merci beaucoup pour toute aide qui peut apporter.