为什么 Safari 有时只渲染图像的顶部？答案

【问题标题】：Why does Safari only render the top of images sometimes?为什么 Safari 有时只渲染图像的顶部？
【发布时间】：2021-06-28 08:46:44
【问题描述】：

我在挪威的一家媒体公司工作，在极少数情况下，我们会看到图片无法完整呈现。发生这种情况时，我们可以刷新页面，图像仍将仅部分呈现。我们只在 Safari 上看到过这种情况，而且我能够在桌面 (Safari 13.1.2) 和移动设备 (iOS 14.4.1) 上重现它。

在网络选项卡中，图像似乎已完全交付。传输的字节数量是预期数量。事实上，如果我们将容器的高度增加 1px，图像会突然完整显示，没有网络活动发生。换句话说，浏览器确实收到了完整的图像，只是没有显示。

样式中的一切看起来都很正常，但我们仍然认为这与 CSS 有某种关系。但是，我们创建了一个本地覆盖，并且我们仍然能够使用以下代码进行重现：

<figure class="desktopi-45000 mobilei-45000 tableti-45000">
    <picture>
        <img itemprop="image" data-defer="view" sizes="(max-width: 640px) 640px,(max-width: 1024px) 1024px,1240px" title="- Du hører ikke hjemme her!" alt="- Du hører ikke hjemme her!" class="" srcset="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=760&height=342&compression=70 640w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=900&height=405&compression=80 1024w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=980&height=441&compression=80 1240w" src="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=380&height=171">
    </picture>
</figure>

这是我们在问题发生时看到的图像比较。请注意，在错误发生之前可能需要多次尝试。

在试图解决这个问题时，我们遇到了a similar question。但是，提供的答案未能详细说明问题的根本原因。其中一个答案说使用decoding="sync"，这似乎确实解决了问题（至少，我们不能用添加的那个来重现）。但是，由于它具有性能影响，这不是一个可行的解决方案。鉴于其他站点没有遇到此问题并且不使用decoding="sync"，还有其他事情发生。因此，问题是为什么会发生这种情况？是什么原因造成的，有什么办法可以解决？

【问题讨论】：

标签： html css image safari

【解决方案1】：

The most upvoted answer 关于您遇到的问题确实实际上澄清了一点。但是为了更多的解释，有实际的 Mozilla WebDeveloper 解释here，根据the second answer，iOS 在加载东西和低优先级的东西时有一点软限制（比如异步加载的东西) 被赋予更少的内存。
通过在<img> 标签上使用decoding="sync"，您可以指定它应该被同步加载，同步加载的东西往往具有更高的优先级，因此有更多的内存可以使用。您可以选择降低图像的分辨率，以便在加载图像时不必依赖同步加载来允许更高的内存使用。
据我所知，这实际上是一个已知的iOS/MacOS 问题，但我找不到任何关于它的工作的提及。因此，同步加载或不同的图像源（具有不同的分辨率）甚至可能是 iframe 风格技术的一些现代实现（如 JSP 上使用的，或任何类型的嵌套，如在 Angular 中可以找到的）都可以作为缓解这种情况的方法问题，但这似乎是苹果必须解决的问题，才能毫无疑问地引起问题。

我可能错了，因为我不是 Apple 技术人员，但是天生的浏览器问题不能仅通过 Web 编程来解决。对于将所有这些都放在答案中，我深表歉意，但 cmets 有一些字符限制，链接也算在内。

【讨论】：

【解决方案2】：

在本地测试时，这似乎可以通过添加任何一个来解决

decoding="async"

或

decoding="sync"

到图像标签。出于某种原因，运行在 Apple 产品上的 Safari 和浏览器似乎很难自动选择最合适的解码图像的方式来呈现。

【讨论】：

【解决方案3】：

在开发者工具中，我注意到如果你在css中改变一些东西，图片就会完全显示出来...... 它成为我的解决方案：图片上传后，我使用js添加了css，它不会影响页面上的图像，例如（z-index）或其他任何东西，但多亏了这个，图片开始完全显示

【讨论】：

如果您在答案中包含代码会很好，因此对其他人也很清楚。