Bug 311238 – REGRESSION(305392@main): Image with srcset and sizes containing calc(number / 0) is not displayed

• Component: CSS
• Status: RESOLVED FIXED

Created attachment 478869 [details]
Problem

Hello,

After upgrading to iOS 26.4, we started receiving many reports from merchants using our Shopify themes that images were no longer showing. This is reproducible from Safari 26.4, and still visible on TP.

I've been unable to re-create a simplified test case so it's probably a complex combination.

To reproduce the issue:

1. Open this page on Safari 26.4+: https://prestige-theme-allure.myshopify.com/search?q=bag
2. Switch to mobile breakpoint.
3. No image show up.

Thanks

I've done further debugging and ti seems the issue is related here to the object-fit: contain on the .product-card__image element.

[Karl Dubost]

Created attachment 478870 [details]
rendering in safari, firefox

* Safari on the left two widths.
* Firefox on the right two widths.

```
<div class="product-card__figure">
    <a href="/products/le-sac-baguette-almond-green-liege?_pos=6&amp;_sid=2a748b7da&amp;_ss=r" class="product-card__media" draggable="false" data-instant="">
        <img src="//prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=3500" alt="Le Sac Baguette - Léo et Violette #almond_green_liege" srcset="//prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=200 200w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=300 300w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=400 400w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=500 500w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=600 600w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=700 700w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=800 800w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=1000 1000w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=1200 1200w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=1400 1400w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=1600 1600w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-01_d72f122b-d3a7-4a64-8f21-25daff4a5037.jpg?v=1676886013&amp;width=1800 1800w" width="3500" height="3500" sizes="(max-width: 699px) calc(100vw / ), (max-width: 999px) calc(100vw / 0 - 64px), calc((100vw - 96px) / 3 - (24px / 3 * 2))" draggable="false" class="product-card__image product-card__image--primary  aspect-natural">
        <img src="//prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=3500" alt="Le Sac Baguette - Léo et Violette #almond_green_liege" srcset="//prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=200 200w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=300 300w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=400 400w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=500 500w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=600 600w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=700 700w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=800 800w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=1000 1000w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=1200 1200w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=1400 1400w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=1600 1600w, //prestige-theme-allure.myshopify.com/cdn/shop/products/Le-Baguette-Vert-Amande-Liege-02_ad6c5c7e-a8dc-4492-96c9-b17791f0d8a8.jpg?v=1677157291&amp;width=1800 1800w" width="3500" height="3500" loading="lazy" class="product-card__image product-card__image--secondary" fetchpriority="low" sizes="(max-width: 699px) calc(100vw / ), (max-width: 999px) calc(100vw / 0 - 64px), calc((100vw - 96px) / 3 - (24px / 3 * 2))" draggable="false" aria-hidden="true">
    </a>
    <product-form>
        <form method="post" action="/cart/add" id="product_form_7129634799679" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
            <input type="hidden" name="form_type" value="product">
            <input type="hidden" name="utf8" value="✓">
            <input type="hidden" name="on_success" value="force_open_drawer">
            <input type="hidden" name="quantity" value="1">
            <input type="hidden" name="id" value="40008476000319">
            <button type="submit" class="product-card__quick-add-button">
                <span class="sr-only">Add to cart</span>
                <svg aria-hidden="true" focusable="false" fill="none" width="12" class="icon icon-plus" viewBox="0 0 12 12">
                    <path d="M6 0v12M0 6h12" stroke="currentColor" stroke-width="1"></path>
                </svg>
            </button>
            <input type="hidden" name="product-id" value="7129634799679">
            <input type="hidden" name="section-id" value="template--15179706531903__main">
        </form>
    </product-form>
</div>
```

The CSS is 

```
img {
    color: #0000;
    max-width: 100%;
    height: auto;
}

.product-card__image {
    object-fit: contain;
    object-position: center;
    margin-inline: auto;
    transition: opacity .1s ease-in-out;
}

@media screen and (pointer:fine) {
    .product-card__figure:has(.product-card__image--secondary):hover > .product-card__media .product-card__image--primary {
        opacity: 0;
    }
}

@media screen and (pointer:fine) {
    .product-card__figure:has(.product-card__image--secondary):hover > .product-card__media .product-card__image--secondary {
        opacity: 1;
    }
}
```

[Radar WebKit Bug Importer]

<rdar://problem/173831217>

[Karl Dubost]

 sizes="(max-width: 699px) calc(100vw / ), (max-width: 999px) calc(100vw / 0 - 64px), calc((100vw - 96px) / 3 - (24px / 3 * 2))"


* calc(100vw / )
* calc(100vw / 0 - 64px)

This is not good.

Great finding Karl! I wondered why it worked in the collection pages but not search. I indeed forgot to pass the number of items per row which caused this issue. However there is still a regression somewhere so probably it should default to 100vw when it encounters an invalid value (to align with previous versions and how other browsers behave in this situation).

I've fixed the issue on the store so you won't be able to reproduce the issue anymore in the link I gave, but I think you know where the regression might lie now :)

[Karl Dubost]

Created attachment 478871 [details]
minimal testcase

This is not about object-fit: contain.
This is about srcset and invalid calc(1px / 0)
division by zero.

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/61844

[Ahmad Saleem]

Pull request: https://github.com/WebKit/WebKit/pull/61856

[EWS]

Committed 310418@main (e29e71d45d25): <https://commits.webkit.org/310418@main>

Reviewed commits have been landed. Closing PR #61856 and removing active labels.

[Ahmad Saleem]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58936