html - Safari 不根据宽度和高度属性计算图像纵横比

Question

我最近在一个图像繁重的网站上实现了延迟图像加载功能，并且遇到了重排问题。width我通过使用和height图像属性手动指定图像尺寸来解决问题，如下所示：

<img class="lazyload img-fluid" data-src"/path/to/image.jpg" width="200" height="400" />

它在除 Safari 之外的所有浏览器中都运行良好，但我很困惑，因为 Safari 14（和移动 Safari 14）据说支持基于width和height属性的计算纵横比。

我最新的 macOS 或 iOS 设备似乎都没有在 Safari 中识别此功能，但在其他所有现代浏览器中都可以识别。预期的结果是<img />标签所在的页面上的点应该根据使用widthandheight属性计算的纵横比被保留（绘制），稍后data-src通过延迟加载插件被属性替换。在 Firefox 和 Chrome（+ 基于 Chromium 的浏览器）中，空间被保留，直到图像被加载（以防止回流）；在 Safari 中，不保留空间，加载图像后页面会移动。

任何人都知道我做错了什么？我不担心向后兼容性（Safari 不支持 14.0 之前的相关功能）或 IE 支持，所以这个解决方案对我来说非常好，直到aspect-ratio在 Chrome 以外的浏览器中可用。不过，Safari 很重要，所以我会接受任何建议。

标签： htmlimagesafariaspect-ratio

Answer 1

该问题与 Safari 的 WebKit API 中的计算错误有关。该问题已在 WebKit Bugzilla ( report ) 上报告，并在WebKit Changeset 276521中进行了修补。所述变更集与Safari Technical Preview 125合并并发布。