Веб-страница не загружается на устройствах Apple

Я сделал веб-страницу на Django + Bootstrap 5. Страница работает нормально и все показывает, так же как и на Mobile для android телефонов.

Но когда дело доходит до iPhone 6, 7 и старше, страница не отображает gifs или картинки, которые динамически приходят из DjangoDB как URL.

[вот как это выглядит на iphone и MacbookAir][1] [1]: https://i.stack.imgur.com/hvKVK.jpg

Это сегмент кода, который должен отобразить список video_list

<ul id="first-category" class="items-container">
{% for video in video_list %}
<li class="item">
    <section class="video-container {{video.source_name}}">  
      <a href="{% url 'iepheme_app:video_player' pk=video.id %}">
        <img class="visual-resource" aria-describedby="{{video.id}}-title" src="{{ video.thumbnail_url }}" alt="{{ video.title }}">
        <section class="info">
          <label id="{{video.id}}-title" for="{{video.id}}">{{video.title}}</label>
        </section>
      </a>
    </section>
  </li>
{% endfor %}
Я пробовал размещать статичные изображения вместо gif, удалял медиа-запросы, чтобы проверить, не является ли это проблемой отображения.

Мой друг попробовал сайт на этих устройствах: MacBook Pro MacOS Monterrey 2.01 + планшет Ipad Pro 2018 iOS 15.01 + Iphone 11 Pro Max iOS 15.3.1 и все они отображают веб-страницу без единой проблемы.

Итак, проблема сосредоточена специально вокруг IPhone 6, 7 и старше.

Речь идет о сайте https://www.ipeheme.com. Я благодарен за любую помощь.

Я нашел ответ после того, как смог самостоятельно опробовать MacBook. После использования инспектора элементов, чтобы проверить, все ли загружается в сети, я начал отключать один за другим элементы css страницы.

Очевидно, что position: absolute; вызывала проблемы на устройствах Apple до 2018 года, я не знаю причину, но комментирование этой строки решило все мои проблемы с Apple.

  .item .visual-resource {
/* position: absolute; */
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
transition: filter 300ms ease-in-out;

}

Вернуться на верх