2

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.

yhattav
  • 63
  • 6
  • This file must have something Safari doesn't like. I tried both lossy and lossless formats and it seems to support both, [even animated](https://mathiasbynens.be/demo/animated-webp)... Not sure what's so special about this file... – Kaiido Apr 27 '21 at 08:22
  • Thank you. From further investigation this is resolved if bigSur and safari are in the latest version as of today. Might be something that was resolved by the recent patches. – yhattav Apr 28 '21 at 11:55

1 Answers1

0

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.

Piotr Kocybik
  • 121
  • 3