Isotope infinite scroll broken with permalink change

Hi,

I’ve added isotope infinite scroll to a post loop that works absolutely as it should with default permalinks, but when I change the permalinks to %postname% or anything else, I get some strange behaviour going on.

Infinite scroll will load a couple more posts… but on its 2nd load, it loads content from another template (different size layout) :S – if I rename the trigger from element (which is used in all templates) to something unique it doesnt load more than 2x pages. Works absolutely fine with default permalinks though?

Has anybody experienced this and found a fix?

I have a fairly standard setup.

content is wrapped in a class to trigger the infinite scroll

<div class="row posts-masonry">
	<?php if ( have_posts() )  ?>
		<?php while ( have_posts() ) : the_post();  ?>	

<?php if( get_post_format() == 'quote' ) : ?>
<div class="element large-6 columns"><?php get_template_part( 'content-quote' ); ?></div>

<?php elseif( get_post_format() == 'ETC ETC' ) : ?>
<div class="element large-6 columns"><?php get_template_part( 'ETC ETC' ); ?></div>

<?php else : ?>
<div class="element large-6 columns"><?php get_template_part( 'content' ); ?></div>
<?php endif; ?>

<?php endwhile;
?>
</div>

jQuery(function($){
      var $container = $('.posts-masonry');
      $container.isotope({
        itemSelector : '.element'
      });

      $container.infinitescroll({
        navSelector  : '.page-numbers',    // selector for the paged navigation
        nextSelector : '.page-numbers a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'https://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) );
        }
      );
    });

Many thanks