Невозможно щелкнуть дочерние элементы в столбце css в Safari (на мобильных устройствах и на компьютерах)

Question

У меня есть изображения в столбцах, которые пользователи могут «занести в список», щелкнув сердце с потрясающим шрифтом в верхнем правом углу. Нажатие на сердечки работает во всех браузерах, кроме 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-м столбце, а дочерний элемент (правильно) автоматически выбирается в первом столбце.

Есть идеи, что может вызвать такое поведение? Что я могу даже протестировать?