Я использую изотоп для фильтрации сообщений в wordpress в зависимости от их категории. Все в порядке в Firefox, но в Safari и фильтрации Chrome не работает. Когда я нажимаю элемент фильтра, анимации не происходит. Позиционирование - прекрасный кроссбраузер. Оба Safari и Chrome не сообщают о каких-либо ошибках в консоли ошибок, поэтому я не знаю, что не так.jQuery фильтрация изотопов, не работающая в Safari и Chrome
Вот выводимый HTML в Safari:
фильтр нав:
<div id="isotope-nav">
<div class="gallery-fillter-wrapper">
<select class="gallery-filter">
<option>-- Filter galleries --</option>
<option data-filter="*" class="isotope-nav-item">All galleries</option> <option data-filter=".art-exhibitions" class="isotope-nav-item">Art Exhibitions</option>
<option data-filter=".historical-photos-exhibition" class="isotope-nav-item">Historical photos Exhibition</option>
<option data-filter=".other-exhibitions" class="isotope-nav-item">Other exhibitions</option>
<option data-filter=".springtime-in-the-royal-compound" class="isotope-nav-item">Springtime in The Royal Compound</option>
<option data-filter=".summer-at-the-royal-compound" class="isotope-nav-item">Summer at The Royal Compound</option>
<option data-filter=".the-artwork-of-the-month" class="isotope-nav-item">The Artwork of the Month</option>
<option data-filter=".the-regalia" class="isotope-nav-item">The Regalia</option>
<option data-filter=".trh-prince-peter,-prince-philip-and-prince-alexander" class="isotope-nav-item">TRH Prince Peter, Prince Philip and Prince Alexander</option>
</select>
</div><!-- end .gallery-filter-wrapper -->
</div>
элементы, которые должны быть отфильтрованы
<div id="gallery-wrapper" style="position: relative; overflow: hidden; height: 1745px;" class="isotope">
<div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
</div><!-- end .child-page-thumb -->
<div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 0px, 0px);">
</div><!-- end .child-page-thumb -->
<div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 0px, 0px);">
</div><!-- end .child-page-thumb -->
<div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 161px, 0px);">
</div><!-- end .child-page-thumb -->
<div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 161px, 0px);">
</div><!-- end .child-page-thumb -->
<div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 203px, 0px);">
</div><!-- end .child-page-thumb -->
<div class="child-page-thumb other-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 343px, 0px);">
</div><!-- end .child-page-thumb -->
</div>
и здесь является JavaScript:
var cell_width = $('.child-page-thumb').outerWidth();
var cell_height = $('.child-page-thumb').outerHeight();
$container = $('#gallery-wrapper');
$container.isotope({
layoutMode: 'masonry'
});
$('#isotope-nav option').click(function(){
$selector = $(this).attr('data-filter');
$container.isotope({filter: $selector});
return false;
});