Bug 311238

Summary: REGRESSION(305392@main): Image with srcset and sizes containing calc(number / 0) is not displayed
Product: WebKit Reporter: mic.gallego
Component: CSSAssignee: Ahmad Saleem <ahmad.saleem792>
Status: RESOLVED FIXED    
Severity: Major CC: karlcow, koivisto, sgill26, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 26   
Hardware: Unspecified   
OS: Unspecified   
URL: https://prestige-theme-allure.myshopify.com/search?q=bag
See Also: https://github.com/web-platform-tests/wpt/pull/58936
Attachments:
Description Flags
Problem
none
rendering in safari, firefox
none
minimal testcase none

mic.gallego
Reported 2026-03-31 18:30:25 PDT
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
Attachments
Problem (52.81 KB, image/png)
2026-03-31 18:30 PDT, mic.gallego
no flags
rendering in safari, firefox (344.20 KB, image/png)
2026-03-31 20:44 PDT, Karl Dubost
no flags
minimal testcase (512 bytes, text/html)
2026-03-31 22:47 PDT, Karl Dubost
no flags
mic.gallego
Comment 1 2026-03-31 18:33:51 PDT
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
Comment 2 2026-03-31 20:44:45 PDT
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
Comment 3 2026-03-31 20:45:31 PDT
Karl Dubost
Comment 4 2026-03-31 21:14:23 PDT
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.
mic.gallego
Comment 5 2026-03-31 22:24:48 PDT
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
Comment 6 2026-03-31 22:47:47 PDT
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
Comment 7 2026-04-01 14:24:12 PDT
Ahmad Saleem
Comment 8 2026-04-01 15:26:48 PDT
EWS
Comment 9 2026-04-01 21:44:03 PDT
Committed 310418@main (e29e71d45d25): <https://commits.webkit.org/310418@main> Reviewed commits have been landed. Closing PR #61856 and removing active labels.
Ahmad Saleem
Comment 10 2026-04-01 23:13:54 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58936
Note You need to log in before you can comment on or make changes to this bug.