Следующая ситуация: у меня есть галерея фильтров с изображениями, которая отлично работает во всех браузерах, которые я могу протестировать. На IOS, однако, только первая карта отображается правильно (с изображением, другие карты показывают только свой цвет фона.
У меня нет этой проблемы с группой карт, но это не то, что Я хочу. Я не уверен, что проблема связана с jquery fadeIn, поскольку, когда я нажимаю кнопку фильтра, все изображения постепенно исчезают, как предполагается, но как только анимация завершена, они исчезают (за исключением первая карта img). Обратите внимание, что при отображении на небольших устройствах (также iOS) все карты находятся ниже друг друга, он работает правильно. Хотя не уверен, что из этого взять.
Во всяком случае, что-то с или столбцы карт, или материал jquery, похоже, не работают должным образом вместе (или что-то совершенно другое, смеется).
Так как мои навыки в веб-разработке только go до копирования-вставки все вместе, вы видите, я очень ценю любую помощь, ребята!
Прикрепленный ниже: код, URL сайта и скриншоты.
Не стесняйтесь проверить это o на моем сайте: lukvermeulen. com
HTML:
<div class="card-columns mt-3 gallery">
<!-- Element -->
<div class="card overflow-hidden rounded-0" data-category="research">
<img class="card-img project_image rounded-0" src="img/Bachelorthesis/teaser.jpg" alt="segmented pointcloud">
<div class="card-img-overlay project_info d-flex justify-content-center">
<div class="d-flex flex-column justify-content-around text-center">
<div class=""><p class="card-text">B4 Pointclouds in VR</p></div>
<div class="">
<a class="btn btn-md btn-outline-dark " href="segmenting-and-labeling-pointclouds-in-vr.html" role="button" title="Segmenting and labeling pointclouds in VR">View</a>
</div>
<div class=""><p class="card-text"><small class="text-muted">Bachelorthesis</small></p></div>
</div>
</div>
</div>
<!-- Element -->
<div class="card overflow-hidden rounded-0" data-category="architecture visualization">
<img class="card-img project_image rounded-0" src="img/B3/00_Teaser_Uebersicht_500.jpg" alt="Urban planning visualization">
<div class="card-img-overlay project_info d-flex justify-content-center">
<div class="d-flex flex-column justify-content-around text-center">
<div class=""><p class="card-text">B3 Aachen Südpark</p></div>
<div class="">
<a class="btn btn-md btn-outline-dark " href="suedpark-urban-planning.html" role="button" title="Urban Planning Project">View</a>
</div>
<div class=""><p class="card-text"><small class="text-muted">Urban planning project</small></p></div>
</div>
</div>
</div>
<!-- Element -->
<div class="card overflow-hidden rounded-0" data-category="craft">
<img class="card-img project_image rounded-0" src="img/building-a-knife/00_Teaser.jpg" alt="Building a knife teaser image">
<div class="card-img-overlay project_info d-flex justify-content-center">
<div class="d-flex flex-column justify-content-around text-center">
<div class=""><p class="card-text">Building a knife</p></div>
<div class="">
<a class="btn btn-md btn-outline-dark " href="building-a-knife.html" role="button" title="Building a knife">View</a>
</div>
<div class=""><p class="card-text"><small class="text-muted">from steel to knife</small></p></div>
</div>
</div>
</div>
<!-- Element -->
<div class="card overflow-hidden rounded-0" data-category="architecture">
<img class="card-img project_image rounded-0" src="img/BmT/alsterkrone-teaser.jpg" alt="Alsterkrone teaser image">
<div class="card-img-overlay project_info d-flex justify-content-center">
<div class="d-flex flex-column justify-content-around text-center">
<div class=""><p class="card-text">The Alsterkrone</p></div>
<div class="">
<a class="btn btn-md btn-outline-dark " href="alsterkrone.html" role="button" title="Alsterkrone">View</a>
</div>
<div class=""><p class="card-text"><small class="text-muted">autonomous transportation</small></p></div>
</div>
</div>
</div>
<!-- Element -->
</div>
Custom CSS:
.project_image {
/* Zoom */
-webkit-transform: scale(1);
transform: scale(1);
/*Blur Photo
-webkit-filter: blur(0px);
filter: blur(0px);*/
/*Grayscale Photo
-webkit-filter: grayscale(100%);
filter: grayscale(100%);*/
/* Blur + Gray Scale */
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
/* Opacity*/
opacity: 1;
-webkit-transition: .3s ease;
transition: .5s ease;
backface-visibility: hidden;
}
.project_info {
-webkit-transition: .5s ease;
transition: .5s ease;
/* Opacity*/
opacity: 0;
display: none;
/*position info in center (now with bootstrap classes)
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;*/
}
.card:hover .project_image {
/* Opacity*/
opacity: .3;
/* Zoom*/
-webkit-transform: scale(1.05);
transform: scale(1.05);
/*Blur Photo
-webkit-filter: blur(3px);
filter: blur(3px);*/
/*Grayscale Photo
-webkit-filter: grayscale(0%);
filter: grayscale(0%);*/
/* Blur + Gray Scale */
-webkit-filter: grayscale(80%) blur(1px);
filter: grayscale(80%) blur(1px);
}
.card:hover .project_info {
/* Opacity*/
opacity: 1;
}
JS:
// JavaScript Document
/* Filter URL */
$( document ).ready(function() {
var $startFilter = $('.filter [data-filter]'),
$startBoxes = $('.gallery [data-category]');
var queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const filter = urlParams.get('filter')
if(urlParams.has('filter')){
var startColor = filter;
$startFilter.removeClass('active');
$('.filter [data-filter="'+startColor+'"]').addClass('active');
if (startColor == 'all') {
$startBoxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$startBoxes.addClass('is-animated').fadeIn();
});
} else {
$startBoxes.removeClass('is-animated')
.fadeOut("slow").promise().done(function() {
$startBoxes.filter('[data-category *= "' + startColor + '"]')
.addClass('is-animated').fadeIn();
});
}
}
});
/* Filter galler */
var $filters = $('.filter [data-filter]'),
$boxes = $('.gallery [data-category]');
$filters.on('click', function(e) {
e.preventDefault();
var $this = $(this);
$filters.removeClass('active');
$this.addClass('active');
var $filterColor = $this.attr('data-filter');
if ($filterColor == 'all') {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.addClass('is-animated').fadeIn();
});
} else {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.filter('[data-category *= "' + $filterColor + '"]')
.addClass('is-animated').fadeIn();
});
}
});
Скриншоты: 
