同位素物品有时会占用太多空间并被切断

I have an issue with isotope grid... Most of the time it shows up correctly. But when I am refreshing the page, sometimes the space between the items becomes wider and the last column gets cut off at the edge of the container. The issue randomly shows up in safari. The other browsers like firefox or chrome work well. Does anyone have an idea why this is? It is driving me crazy and I can not find any solution anywhere... I post my code below...

jQuery:

var grid_filterbar = jQuery('.grid.filterbar').imagesLoaded( function() {
grid_filterbar.isotope({
itemSelector: '.isotope-item',
masonry: {
  percentPosition: true,
  gutter: '.gutter-sizer',
  columnWidth: '.grid-sizer',
}
}); 
});

PHP:

<?php $mitglieder = get_field('kompetenz_mitglieder_hinzufuegen');
   if( $mitglieder ): ?>
      <div class="wrapper-mitglieder">
      <h2 class="spacer"><?php _e("Mitglieder", "Template-Kompetenzen"); ?></h2>

      <span><?php echo facetwp_display( 'facet', 'standort' ); ?></span>

        <?php foreach( $mitglieder as $post): 
                setup_postdata($post);
                $zugehoerige_anwaelte = get_the_ID();
                $str[] = $zugehoerige_anwaelte;
              endforeach; ?>
        <?php $arr = $str; ?>
        <?php wp_reset_postdata(); ?>


        <?php $ausgabe = new WP_Query( array( "post_type" => "anwaelte", "post_status" => "publish", "orderby" => "title", "order" => "ASC", "posts_per_page" => -1, "post__in" => $arr ) ); ?>

          <div class="wrapper-mitglieder--main">
           <div class="grid filterbar facetwp-template">
            <div class="grid-sizer"></div><div class="gutter-sizer"></div>

              <?php while($ausgabe->have_posts()) : $ausgabe->the_post(); ?>
              <?php $profilbild = get_field('anwalt_profilbild_thumb'); ?>

                <div class="lawyer_grid_item--wrapper isotope-item element">
                <a href="<?php the_permalink(); ?>">
                 <div class="lawyer-grid-item--inner">
                 <div class="lawyer-grid-image-wrapper round fullscreen">
                   <?php if ( $profilbild ) {
                       $size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
                       echo wp_get_attachment_image( $profilbild, $size );
                   } else {
                       $bildpfad = get_stylesheet_directory_uri();
                       echo  '<img src="' . $bildpfad . '/img/avatar_profil.jpg' . '" />';
                   } ?>
                 </div>
                 <?php 
                     $anwalt_titel = get_field('anwalt_titel');
                     $anwalt_vorname = get_field('anwalt_vorname');
                     $anwalt_nachname = get_the_title();
                     echo $anwalt_titel . ' ' . $anwalt_vorname . ' ' . $anwalt_nachname; ?>
                 </div>
                </a>
                </div>
                <?php unset($profilbild); ?>

              <?php endwhile; ?>
            </div>
          </div>
         </div>
    <?php endif; ?>

    <?php wp_reset_postdata();  // IMPORTANT - reset the $post object so the rest of the page works correctly ?>

CSS:

.wrapper-mitglieder{
   width: 100%;
   position: relative;
   height: auto;
   overflow: hidden;
}

.wrapper-mitglieder--main{
   margin-top:30px;
   margin-bottom:35px;
   position: relative;
}

.mitglieder-grid-filter{
   margin-top: 30px;
}

.mitglieder-grid-filter a{
   margin-right: 5px;
   margin-bottom:10px;
}

.wrapper-mitglieder--main .grid-sizer,
.wrapper-mitglieder--main .isotope-item{
   width: 18%;
   text-align: center;
}

.wrapper-mitglieder--main .gutter-sizer{
   width:2.5%;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper{
   position: relative;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper .lawyer-grid-item--inner{
   width: 100%;
   position: relative;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper .lawyer-grid-item--inner .lawyer-grid-image-wrapper{
   height: 65px;
   width: 65px;
   margin: 0 auto;
   margin-bottom:10px;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.2s ease-in-out;
   -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0);
   -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper:hover .lawyer-grid-item--inner .lawyer-grid-image-wrapper{
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   -ms-filter: grayscale(0%);
   -o-filter: grayscale(0%);
   filter: grayscale(0%);
   transition: all 0.2s ease-in-out;
   -webkit-box-shadow: 5px 5px 14px 3px rgba(0,0,0,0.07);
   -moz-box-shadow: 5px 5px 14px 3px rgba(0,0,0,0.07);
   box-shadow: 5px 5px 14px 3px rgba(0,0,0,0.07);
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.05);
   -ms-transform: scale(1.05);
   -o-transform: scale(1.05);
   transform: scale(1.05);
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper .lawyer-grid-item--inner{
   font-family:'DIN Next W01 Regular';
   font-size: 14px;
   line-height: 16px;
   min-height: 135px;
   color: rgba(51, 51, 51, 0.80);
   transition: all 0.2s ease-in-out;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper:hover .lawyer-grid-item--inner{
   color: #C34100;
   transition: all 0.2s ease-in-out;
}

Any help would be great... Thank you!