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

我在挪威的一家媒体公司工作，在极少数情况下，我们会看到图像无法完整呈现。当这种情况发生时，我们可以刷新页面，图像仍将仅部分呈现。我们只在Safari上见过这种情况，我已经能够在桌面（Safari 13.1.2）和手机（iOS 14.4.1）上重现这种情况

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

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

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

在试图弄明白这一点的时候，我们遇到了。然而，提供的答案没有详细说明问题的根本原因。其中一个答案是使用

decoding=“sync”

，这似乎确实解决了问题（至少，我们无法用添加的代码进行复制）。但是，由于它对性能的影响，这不是一个可行的解决方案。鉴于其他网站没有遇到此问题，并且没有使用

decoding=“sync”

，因此还有其他问题。因此，问题是为什么会发生这种情况？是什么导致了这一问题，以及可以采取什么措施来解决它？

关于你遇到的问题，实际上已经澄清了一点。但是，还有一个更详细的解释，那就是Mozilla WebDeveloper的实际解释，根据这一解释，iOS在加载内容时有一点软限制，低优先级的内容（比如异步加载的内容）得到的内存更少
通过在

标记上使用

decoding=“sync”

，您指定它应该同步加载，同步加载的东西往往具有更高的优先级，因此具有更多的内存。您可以选择降低图像的分辨率，以便在加载图像时不必依靠同步加载来提高内存使用率
据我所知，这实际上是一个已知的iOS/MacOS问题，但我找不到任何关于这方面工作的提及。因此，同步加载或不同的图像源（具有不同的分辨率），甚至可能是iframe风格技术的一些现代实现（如JSP上使用的，或任何类型的嵌套，如Angular中可以找到的），都可以作为解决此问题的方法，但这似乎是苹果必须解决的问题，才能毫无疑问地引发问题

---

这一点我可能错了，因为我不是苹果的技术人员，但天生的浏览器问题不能单靠网络编程来解决。很抱歉，我把这些都放在了回答中，但是评论有一点字符限制，链接也很重要。

在本地测试时，这似乎可以通过添加

decoding="async"

或

到图像标签。出于某种原因，在苹果产品上运行的Safari和浏览器似乎难以自动选择最佳的图像解码方式进行渲染

decoding="sync"