Images on iOS Safari Not Displaying

PYoganathan — Wed, 01 Mar 2023 18:20:30 GMT

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.

Re: Images on iOS Safari Not Displaying

Jaycee_Lewis — Thu, 02 Mar 2023 22:48:50 GMT

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

Re: Images on iOS Safari Not Displaying

PYoganathan — Fri, 03 Mar 2023 14:21:15 GMT

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.

topic Re: Images on iOS Safari Not Displaying in CMS Development

Images on iOS Safari Not Displaying

Re: Images on iOS Safari Not Displaying

Re: Images on iOS Safari Not Displaying