1

我有一个在 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 而实际上不支持？

谢谢你的帮助。

4

1 回答 1

0

在 Safari 14.0.3 和 OS X Mojave 上，如果type="image/webp"未指定，回退到 jpg 会失败。它尝试显示图像，但仅显示错误图标。一旦我添加类型，它就会正确地回退到 Jpeg。因此，正如你所描述的那样。如果没有指定类型，它会尝试显示 webp，认为它可以处理它，但是当你告诉它它的类型是 webp 时，它知道它会失败并回退。

于 2021-12-27T09:49:45.380 回答