У меня есть изображения в столбцах, которые пользователи могут «занести в список», щелкнув сердце с потрясающим шрифтом в верхнем правом углу. Нажатие на сердечки работает во всех браузерах, кроме Safari. В Safari функция работает так, как задумано в первом столбце, но не в последующих столбцах, а Safari для ПК и мобильных устройств ведет себя одинаково.
foreach( $images as $img )
{
<div class="img" style="padding-bottom: 8px; overflow: hidden;">
<div class="single-image"
saved="<?php echo $saved ?>"
id="<?php echo $nextIDs ?>"
bg="<?php echo $bigSRC ?>"
class="<?php echo $class ?>"
style="background: url('<?php echo $bg ?>'); background-size: cover; background-repeat: no-repeat; overflow: hidden;">
<img saved="<?php echo $saved ?>"
src="<?php echo $src ?>"
style="opacity: 0;" />
</div>
<span id="tooltip<?php echo $upload_id; ?>" class="saveHeart" style="color: white !important;">
<i class="<?php echo $heartClass ?> fa-heart heart_<?php echo $upload_id.$dimOption.$matOption ?>" >
</i>
</span>
</div>
<?php } ?>
CSS:
.gallery {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
margin-top: 10px;
overflow: hidden;
}
.gallery img, .gallery video {
width: 100%;
height: auto;
transition: 500ms;
margin-bottom: 10px;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
Когда я нажимаю сердечки во 2-м или 3-м столбце, запускается событие щелчка родительского элемента (одиночное изображение). Я пробовал добавлять события-указатели: нет; к родительским и указателям-событиям: все; ребенку, но это не работает. Я добавил больше дочерних элементов, переместил расположение сердечка и несколько css изменений.
Даже когда я проверяю элемент, родительский элемент автоматически выбирается во 2-м и 3-м столбце, а дочерний элемент (правильно) автоматически выбирается в первом столбце.
Есть идеи, что может вызвать такое поведение? Что я могу даже протестировать?