Big Sur 上的 Safari 14 不會加載 webp 並且不會回退到其他提供的源

Question

我有一個圖片元素正在 Catalina 上的 Safari 14 上工作。

它在一個圖片元素中使用兩個來源。 第一個是webp，第二個是jpg。 Safari，因為不支持webp，過去回退到jpg。

在新的 Big Sur 操作系統中，它不會回退，而是顯示錯誤。 網絡選項卡顯示其正在下載 webp（加載失敗）。

我的代碼有一個codepen。 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>

它由兩個圖片元素組成：

1. webp 源，jpg 源，img 標簽。
2. jpg 源，webp 源，img 標簽。

為了讓它更明顯，webp 是粉紅色的，而 jpg 是綠色的。

在chrome中，它顯示粉紅色和綠色，因為它支持webp。 在 Catalina 上的 safari 中，它顯示綠色和綠色，因為它不支持 webp。

我已經閱讀了 webp 支持應該已經添加到新版本中。 https://www.macrumors.com/2020/06/22/webp-safari-14/難道瀏覽器“認為”它支持 webp 而實際上不支持？

謝謝你的幫助。

Answer 1

在 Safari 14.0.3 和 OS X Mojave 上，未指定type="image/webp"時回退到 jpg 失敗。 它嘗試顯示圖像，但僅顯示錯誤圖標。 一旦我添加類型，它就會正確地回退到 Jpeg。 因此，正如你所描述的那樣。 如果沒有指定類型，它會嘗試顯示 webp，認為它可以處理它，但是當你告訴它它的類型是 webp 時，它知道它會失敗並回退。