Изотопные элементы иногда имеют слишком много места и отрезаются

У меня проблема с изотопной сеткой … В большинстве случаев она отображается правильно. Но когда я обновляю страницу, иногда пространство между элементами становится шире, и последний столбец обрезается по краю контейнера. Проблема случайно появляется в сафари. Другие браузеры, такие как Firefox или Chrome, работают хорошо. У кого-нибудь есть идея, почему это так? Это сводит меня с ума, и я нигде не могу найти решение … Я публикую свой код ниже …

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;
}

Любая помощь будет отличной … Спасибо!