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

Question

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

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

样式中的一切看起来都很正常，但我们仍然认为这与 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>

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

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

Answer 1

on the question you've come across does actually clarify it a bit. But for a bit more explanation, there the actual Mozilla WebDeveloper explanation here, and according to 、iOS 在加载内容时有一些软限制，优先级较低的内容（如异步加载的内容）分配的内存较少。
通过在 <img> 标签上使用 decoding="sync"，您指定它应该被同步加载，同步加载的东西往往具有更高的优先级，因此有更多的内存可以使用.您可以选择降低图像的分辨率，以便在加载图像时不必依赖同步加载来允许更高的内存使用量。
据我所知，这实际上是，一个已知的 iOS/MacOS 问题，但我找不到任何关于为此所做的工作的提及。因此，同步加载或不同的图像源（具有不同的分辨率）或者甚至可能是 iframe 样式技术的一些现代实现（例如 JSP 上使用的技术，或任何类型的嵌套，例如 Angular 中可以找到的）都可以用作解决这个问题的方法，但它似乎是 Apple 必须解决的问题，这样它无疑会引起问题。

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

Answer 2

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

来解决

decoding="async"

或

decoding="sync"

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

Answer 3

在开发者工具中，我注意到如果在 css 中更改某些内容，图片会完全显示... 它成为我的解决方案：图片上传后，使用我添加的 js css 这不会影响页面上的图像，如（z-index）或其他任何东西，但由于这个，图片开始全面展示

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

Why does Safari only render the top of images sometimes?

html

css

safari

image