我在挪威的一家媒体公司工作,在极少数情况下,我们会看到图像无法完整渲染。发生这种情况时,我们可以刷新页面,图像仍然只会部分呈现。我们只在 Safari 上见过这种情况,我已经能够在桌面版 (Safari 13.1.2) 和移动版 (iOS 14.4.1) 上重现它。
\n在网络选项卡中,图像似乎已经完全传递。传输的字节量是预期的量。事实上,如果我们将容器的高度增加 1px,图像将突然完整显示,并且不会发生任何网络活动。换句话说,浏览器确实收到了完整的图像,只是没有显示。
\n\n样式中的所有内容看起来都完全正常,但我们仍然认为这与 CSS 有某种关系。但是,我们创建了本地覆盖,并且仍然能够使用以下代码进行重现:
\n<figure class="desktopi-45000 mobilei-45000 tableti-45000">\n <picture>\n <img itemprop="image" data-defer="view" sizes="(max-width: 640px) 640px,(max-width: 1024px) 1024px,1240px" title="- Du h\xc3\xb8rer ikke hjemme her!" alt="- Du h\xc3\xb8rer 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">\n </picture>\n</figure>\nRun Code Online (Sandbox Code Playgroud)\n这是问题发生时我们所看到的图像比较。请注意,可能需要多次尝试才能出现错误。
\n\n在试图弄清楚这一点时,我们遇到了类似的问题。然而,所提供的答案未能详细说明问题的根本原因。答案之一说使用decoding="sync",这似乎确实解决了问题(至少,我们无法通过添加来重现)。然而,由于它对性能的影响,这不是一个可行的解决方案。鉴于其他站点没有遇到此问题并且不使用decoding="sync",因此还有其他问题正在发生。因此,问题是为什么会发生这种情况?造成这种情况的原因是什么?可以采取哪些措施来解决?
amp-email“安全要求”的文档指出:
如果它们有效,所有响应都必须回应上面的 origin 和 __amp_source_origin 值:
Access-Control-Allow-Origin: https://amp.gmail.dev
AMP-Access-Control-Allow-Source-Origin: amp@gmail.dev
Access-Control-Allow-Source-Origin: AMP-Access-Control-Allow-Source-Origin
Run Code Online (Sandbox Code Playgroud)
如果响应不包含这些值,则 CORS 请求将失败,从而导致浏览器控制台警告消息。
我正在操场上测试 amp-list 的使用,我的响应包含这些标头。但是,数据不会出现,并在控制台中我得到以下错误:Request xhr failed: The amp-access-control-allow-source-origin must be equal to the amp source origin sent in the request.???在amp_source_origin请求中提供的amp@gmail.dev预期。
这是我返回的相关响应标头的副本:
Access-Control-Allow-Origin: https://amp.gmail.dev
Access-Control-Allow-Source-Origin: AMP-Access-Control-Allow-Source-Origin
Amp-Access-Control-Allow-Source-Origin: amp@gmail.dev
Run Code Online (Sandbox Code Playgroud)
我需要提供一些额外的标题吗?