我有一个网站，我已经做出响应并利用该<picture>元素来提供 webp、avif 并为旧浏览器提供 png 后备。它应该看起来像这样（Chrome/Safari）：
出于某种原因，某些浏览器（桌面和移动设备上的 Firefox 94，iOS 14 上的 Safari 为例）将加载图像的 AVIF 格式，但会使用我在元素内的显式width和height来自后备标签，从而导致扭曲的图像。<img><picture>
有问题的站点是：https ://blah.cloud/now （将浏览器拉到 <768px 宽以查看问题）。
我进行图像选择的代码如下：
<picture>
<source media="(min-width: 768px)" srcset="/images/logo-title.avif" type="image/avif" alt="logo" width="245" height="34">
<source media="(min-width: 768px)" srcset="/images/logo-title.webp" type="image/webp" alt="logo" width="245" height="34">
<source srcset="/images/logo.avif" type="image/avif" alt="logo" width="65" height="65">
<source srcset="/images/logo.webp" type="image/webp" alt="logo" width="65" height="65">
<img src="/images/logo-title.png" alt="logo" aria-label="logo" width="245" height="34">
</picture>
width显式的原因height是为了让 Google PSI 避免 CLS。
对于为什么会发生这种行为，我有点不知所措——如果它正在拉动 avif/webp 图像，并且我已经确认它是，它应该使用widthand heightassociated with that元素？
任何想法都非常感谢。