如何解决使用内容可见性属性会影响累积布局偏移 (CLS) 指标吗？
我们网站上的页面的 CLS 始终接近于零。这是有道理的，因为它们是服务器呈现的 HTML 页面，具有简单的静态布局。
最近我们添加了 content-visibility: auto per below（仅添加到非折叠部分）：
https://web.dev/content-visibility/
section {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}
这在浏览器中没有明显影响，但根据开发工具“性能”选项卡、chrome 灯塔测量和在 webwebtest.org 上的重复运行，对绘制/渲染指标产生了预期的显着好处
但是，我们注意到在 Google 页面速度洞察的实验室数据部分中，累积布局偏移 (CLS) 从 0.006 急剧增加到 1.000+：
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.godaddy.com
还有人观察这个吗？灯塔测量 CLS 的方式可能存在错误？
解决方法
可能会回答我自己的问题 - 知道已修复的 Chromium 错误，我猜它仍然存在于其他浏览器中以及谷歌页面速度洞察力的任何力量：
内容可见性的错误修复：自动当内容可见性：自动时 Chrome 85 中提供的功能，存在影响 CLS 的缺陷： 跳过和未跳过状态之间的变化 内容可见性：自动子树导致观察到的布局偏移 内容；可见性：调整大小时的自动元素。
在 Chrome 88 中，CLS 问题已修复。往前走，应该有 对此类元素没有 CLS 惩罚。 （请注意，仍有可能 与相邻元素（但不是后代元素）的屏幕上元素的布局偏移 of) content-visibility: auto 元素。
https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_cls.md
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
