如何解决Big Sur 上的 Safari 14 不加载 webp 并且不回退到其他提供的来源
我有一个在 Catalina 上运行 Safari 14 的图片元素。
它在一个图片元素中使用两个来源。第一个是 webp,第二个是 jpg。 Safari,因为它不支持 webp,曾经回退到 jpg。
在新的 Big Sur 操作系统中,它不会回退,而是显示错误。 网络选项卡显示其正在下载 webp(加载失败)。
我有一个带有我的代码的代码笔。 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,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,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,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
<source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,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,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>
由两个图片元素组成:
- webp 源、jpg 源、img 标签。
- jpg 源、webp 源、img 标签。
为了让它更明显,webp 是粉色的,jpg 是绿色的。
在 chrome 中,它显示粉红色和绿色,因为它支持 webp。 在 Catalina 上的 safari 中,它显示绿色和绿色,因为它不支持 webp。
我读到应该在新版本中添加 webp 支持。 https://www.macrumors.com/2020/06/22/webp-safari-14/ 会不会是浏览器“认为”支持 webp 而实际上不支持?
感谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。