Safari 不根据宽度和高度属性计算图像纵横比
Safari not computing image aspect ratios from width and height attributes
我最近在一个图像密集型网站上实施了延迟图像加载功能，但一直遇到重排问题。我通过使用 width 和 height 图像属性手动指定图像尺寸来解决问题，如下所示：
<img class="lazyload img-fluid" data-src"/path/to/image.jpg" width="200" height="400" />
它在除 Safari 之外的所有浏览器中都运行良好，但我很困惑，因为 Safari 14（和移动版 Safari 14）supposedly support computing aspect ratios based on the width and height attributes。
None 我最新的 macOS 或 iOS 设备似乎可以识别 Safari 中的此功能，但它们可以在所有其他现代浏览器中识别。预期的结果是页面上 <img /> 标签所在的位置应根据使用 width 和 height 属性计算出的纵横比保留（绘制），以便后来通过延迟加载插件替换为 data-src 属性。在 Firefox 和 Chrome（+ 基于 Chromium 的浏览器）中，space 被保留直到图像被加载（以防止回流）；在 Safari 中，space 未保留，加载图像后页面移动。
有人知道我做错了什么吗？我不担心向后兼容性（Safari 不支持 14.0 之前的相关功能）或 IE 支持，所以这个解决方案对我来说非常好，直到 aspect-ratio 在 Chrome 以外的浏览器中可用.不过，Safari 很重要，所以我会采纳任何建议。
此问题与 Safari 的 WebKit API 中的计算错误有关。 WebKit Bugzilla (report), and was patched in WebKit Changeset 276521. Said changeset was merged and released with Safari Technical Preview 125.
上报告了该问题
我最近在一个图像密集型网站上实施了延迟图像加载功能，但一直遇到重排问题。我通过使用 width 和 height 图像属性手动指定图像尺寸来解决问题，如下所示：
<img class="lazyload img-fluid" data-src"/path/to/image.jpg" width="200" height="400" />
它在除 Safari 之外的所有浏览器中都运行良好，但我很困惑，因为 Safari 14（和移动版 Safari 14）supposedly support computing aspect ratios based on the width and height attributes。
None 我最新的 macOS 或 iOS 设备似乎可以识别 Safari 中的此功能，但它们可以在所有其他现代浏览器中识别。预期的结果是页面上 <img /> 标签所在的位置应根据使用 width 和 height 属性计算出的纵横比保留（绘制），以便后来通过延迟加载插件替换为 data-src 属性。在 Firefox 和 Chrome（+ 基于 Chromium 的浏览器）中，space 被保留直到图像被加载（以防止回流）；在 Safari 中，space 未保留，加载图像后页面移动。
有人知道我做错了什么吗？我不担心向后兼容性（Safari 不支持 14.0 之前的相关功能）或 IE 支持，所以这个解决方案对我来说非常好，直到 aspect-ratio 在 Chrome 以外的浏览器中可用.不过，Safari 很重要，所以我会采纳任何建议。
此问题与 Safari 的 WebKit API 中的计算错误有关。 WebKit Bugzilla (report), and was patched in WebKit Changeset 276521. Said changeset was merged and released with Safari Technical Preview 125.
上报告了该问题