Почему отфильтрованный список JavaScript / jQuery не работает в iPhone?

Question

Я создал список, который можно отсортировать по выпадающему меню выбора. У меня есть это в рамках Bootstrap ... на самом деле ничего особенного. Когда я добавляю скрытый атрибут для всей Лиги справедливости, а также пункт меню «Лига справедливости», он работает, как и ожидалось, во всех браузерах настольных компьютеров и Android Chrome / Firefox. Он не работает на любом устройстве iOS, будь то Safari или Chrome для iOS.

Есть ли что-то в скрытом атрибуте, который не работает на iPhone?

Я пробовал это на iPhone 5, 7 и 10.

Имейте в виду, что это может сработать здесь или в ссылке codepen , которую я включил, поэтому я не знаю, куда идти с этим.

Какие возможные причины могут быть для этого?

var filterActive;

function filterCategory(category) {
  if (filterActive != category) {
    // reset results list
    $('.filter-cat-results .f-cat').removeClass('active');
    // elements to be filtered
    $('.filter-cat-results .f-cat')
      .filter('[data-cat="' + category + '"]')
      .addClass('active');
    // reset active filter
    filterActive = category;
  }
}
$('.f-cat').addClass('active');
$('.filtering select').change(function() {
  if ($(this).val() == 'cat-all') {
    $('.filter-cat-results .f-cat').addClass('active');
    filterActive = 'cat-all';
  } else {
    filterCategory($(this).val());
  }
});

.filter-cat-results .f-cat {
  opacity: 0;
  display: none;
}

.filter-cat-results .f-cat.active {
  opacity: 1;
  display: block;
  -webkit-animation: fadeIn 0.65s ease forwards;
  animation: fadeIn 0.65s ease forwards;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<div class="container filtering pt-4">
  <div class="filter-cat row no-gutters mb-5">
    <h5 class="font-weight-bold">Filter by Competency</h5>
    <select class="col-sm-12 form-control">
      <option value="cat-all">Show All</option>
      <option value="xmen">X-Men</option>
      <option value="avenger">Avengers</option>
      <option value="justiceLeague" hidden>Justice League</option>
    </select>
  </div>
</div>

<div class="container">
  <div class="row mb-3 filter-cat-results">
    <div class="col-sm-12" hidden>
      <div class="row f-cat active" data-cat="justiceLeague">
        <h3>Batman</h3>
      </div>
    </div>
    <div class="col-sm-12" hidden>
      <div class="row f-cat active" data-cat="justiceLeague">
        <h3>Flash</h3>
      </div>
    </div>    
    <div class="col-sm-12">
      <div class="row f-cat active" data-cat="xmen">
        <h3>Professor X</h3>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="row f-cat active" data-cat="xmen">
        <h3>Woverine</h3>
      </div>
    </div>
    <div class="col-sm-12" hidden>
      <div class="row f-cat active" data-cat="justiceLeague">
        <h3>Superman</h3>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="row f-cat active" data-cat="xmen">
        <h3>Storm</h3>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="row f-cat active" data-cat="avenger">
        <h3>Ironman</h3>
      </div>
    </div>    
    <div class="col-sm-12">
      <div class="row f-cat active" data-cat="avenger">
        <h3>Dr. Strange</h3>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="row f-cat active" data-cat="avenger">
        <h3>Hulk</h3>
      </div>
    </div>    
  </div>
</div>