Webpage not loading on Apple Devices

Question

I made a webpage on Django + Bootstrap 5. The page works fine and shows everything, and so does on Mobile for android phones.

But when it comes to iPhones 6, 7 or older the page wont display the gifs nor pictures that come dynamically from the DjangoDB as an URL.

[this is how it looks on iphone, and a MacbookAir][1] [1]: https://i.stack.imgur.com/hvKVK.jpg

This is the code segment that's supposed to display the 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 %}

I have tried putting static images instead of gifs, deleting the media queries to check if it wasn't a display problem.

A friend of mine tried the site on these devices: MacBook Pro MacOS Monterrey 2.01+ Tablet Ipad Pro 2018 iOS 15.01 + Iphone 11 Pro Max iOS 15.3.1 and all of them display the webpage without a single problem.

So the issue is centered specially around IPhone 6, 7 or older.

---

The site in question is https://www.ipeheme.com I appreciate all kinds of help.

Answer 1

I found the answer after being able to try a MacBook by myself. After using element inspector to check if everything was loading on the network, i started disabling one by one the css elements of the page.

apparently position: absolute; was causing problems on Apple devices prior to 2018, i don't know the reason but commenting that line solved all my Apple problems.

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

}