Images on iOS Safari Not Displaying

[PYoganathan]

I'm getting this odd bug for logos carousels only on iOS Safari. What happens is it only shows the Alt text of the images but once you scroll or tap anywhere on the page, then the image loads correctly.

This doesn't happen anywhere else for images but wanted to know if this is common or what could be the possible reason for this.

 

[Jaycee_Lewis]

Hey, @PYoganathan 👋 It's likely the community cannot try to help without being able to see the issue in action. You haven't done anything wrong, it's just that it's likely too broad to answer without more details.

Best,

Jaycee

[PYoganathan]

Hey Jaycee,

That's a fair point, let me give more details and findings about this issue.

So first, I'm using a repeater to run this infinite logo carousel in the Design Manager section. Let me provide the code snippet for this:

<div class="slider px-3">
   <div class="slide-track-ecommerce">
      {% for item in module.ecommerce_tab.carrier_logos_for_ecommerce_mobile %}
      <div class="slide">
         {% if item.src %}
         {% set sizeAttrs = 'width="{{ item.width }}" height="{{ item.height }}"' %}
         {% if item.size_type == 'auto' %}
         {% set sizeAttrs = 'width="{{ item.width }}" height="{{ item.height }}" style="max-width: 100%; height: auto;"' %}
         {% elif item.size_type == 'auto_custom_max' %}
         {% set sizeAttrs = 'width="{{ item.max_width }}" height="{{ item.max_height }}" style="max-width: 100%; height: auto;"' %}
         {% endif %}
         {% set loadingAttr = item.loading != 'disabled' ? 'loading="{{ item.loading }}"' : '' %}
         <img src="{{ item.src }}" alt="{{ item.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
         {% endif %}
      </div>
      {% endfor %}
   </div>
</div>

@keyframes scroll-ecommerce {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 12));
}
}
.slider {
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
background-color:#fff;
}
.slider::before, .slider::after {
/* 	 background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); */
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.slider::before {
left: 0;
top: 0;
}
.slider .slide-track-ecommerce {
animation: scroll-ecommerce 24s linear infinite;
display: flex;
width: calc(250px * 24);
}
.slider .slide {
height: 100px;
width: 250px;
}

So the expected result is seen below:

On iOS Safari, only the first two images are visible on the carousel when the animation starts to appear normally. The remaining images are only showing their alt text.

For some reason, when I hardcode (by inserting the URLs for every slide), then all the images are working fine.