gpt4 book ai didi

html - 为什么 Safari 有时只渲染图像的顶部?

转载 作者:行者123 更新时间:2023-12-04 12:29:37 26 4
gpt4 key购买 nike

我在挪威的一家媒体公司工作,在极少数情况下,我们会看到图像无法完整呈现。发生这种情况时,我们可以刷新页面,图像仍然只会部分渲染。我们只在 Safari 上看到过这种情况,我已经能够在桌面(Safari 13.1.2)和移动设备(iOS 14.4.1)上重现它。
在网络选项卡中,图像似乎已完全交付。传输的字节数是预期的数量。事实上,如果我们将容器的高度增加 1px,图像会突然全屏显示,没有网络事件发生。换句话说,浏览器确实收到了完整的图像,只是没有显示。
partial image load
样式中的一切看起来完全正常,但我们仍然认为这与 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>
这是我们在问题发生时看到的图像比较。请注意,在错误发生之前可能需要多次尝试。
comparison of isolated partial image load
在试图弄清楚这一点时,我们遇到了 a similar question .但是,提供的答案未能详细说明问题的根本原因。答案之一说使用 decoding="sync" ,而且这似乎确实解决了问题(至少,我们无法通过添加来重现)。然而,由于它对性能的影响,这不是一个可行的解决方案。鉴于其他站点没有遇到此问题,请勿使用 decoding="sync" ,还有其他事情发生。因此,问题是为什么会发生这种情况?这是什么原因造成的,可以做些什么来解决它?

最佳答案

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

decoding="async"
或者
decoding="sync"
到图像标签。出于某种原因,在 Apple 产品上运行的 Safari 和浏览器似乎难以自动选择最合适的解码图像方式进行渲染。

关于html - 为什么 Safari 有时只渲染图像的顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66903058/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com