Safari 14 on Big Sur doesn't load webp and doesn't fallback to other provided sources

Question

I have a picture element that was working on Safari 14 on Catalina.

It uses two sources in a picture element. The first one is webp and the 2nd one is jpg. Safari, as it doesn't support webp, used to fallback to the jpg.

In the new Big Sur OS it doesn't fallback and displays an error instead. The network tab shows its downloading the webp(failed to load).

I have a codepen with my code. https://codepen.io/yhattav/pen/YzNgBeV

webp(pink) first, jpg(green) 2nd
<picture>
 <source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.webp" type="image/webp">
 <source srcset="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
 <img alt="Lt_Olive.jpg" class="gallery-item-visible gallery-item gallery-item-preloaded" data-hook="gallery-item-image-img" data-idx="0" src="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>
jpg(green) first, webp(pink) 2nd
<picture>
 <source srcset="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
 <source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.webp" type="image/webp">
 <img alt="Lt_Olive.jpg" class="gallery-item-visible gallery-item gallery-item-preloaded" data-hook="gallery-item-image-img" data-idx="0" src="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>

It is composed of two picture elements:

1. webp source, jpg source, img tag.
2. jpg source, webp source, img tag.

To make it more visible the webp is pink and the jpg green.

In chrome, it displays pink and green as it supports webp. In safari on Catalina, it displays green and green as it doesn't support webp.

I have read that webp support should have been added to the new version. https://www.macrumors.com/2020/06/22/webp-safari-14/ Could it be that the browser "thinks" that it supports webp when it actually doesn't?

Thanks for your help.

Answer 1

On Safari 14.0.3 and OS X Mojave, fallback to jpg fails when type="image/webp" is not specified. It tries to show an image, but shows only an error icon instead. As soon as I add type, it falls back to Jpeg correctly. Hence, it is exactly as You described it. Without Type specified, it tries to show the webp, thinking it can hadle it, but when You tell it it's type is webp, than it knows it will fail and falls back.