Chrome 中 inline-flex 内的绝对定位文字滚动后仍不可见，如何排查？

2026-11-04数据阿明

结论

给 .offscreen 设置 position: relative，让 .offscreen-secret 以它为定位参照。.offscreen 当前没有建立定位包含块，绝对定位的子元素可能会相对于其他包含块（通常是初始包含块）定位。同时，.offscreen的clip-path` 会裁剪后代元素。这两者可能导致文字位置与裁剪区域不重合。

仅凭描述和代码，无法确认这是 Chrome 145 的浏览器缺陷。窗口大小变化后文字才出现，说明重新布局或重绘可能影响结果，但这不足以单独证明浏览器存在 bug。

调整定位参照

.offscreen {
  position: relative;
  width: 60vw;
  background: #bbb;
  clip-path: inset(0);
}

.offscreen-secret {
  position: absolute;
  right: 1em;
}

设置 position: relative 后，.offscreen 仍按正常布局参与排版，其中的绝对定位子元素则以 .offscreen 的定位框为参照。滚动时，元素和裁剪区域会随内容一起移动；当该区域滚入可视范围，文字便会显示。

如果仍然不可见

在开发者工具中检查 .offscreen-secret 的计算位置，以及 .offscreen 的边界和裁剪区域。确认文字位于 .offscreen 的框内，并检查滚动后该框是否进入 .wrapper 的可视区域。也可以暂时移除 clip-path。如果文字随后出现，就需要继续检查定位框与裁剪区域的关系。

如果添加 position: relative 后，在相同页面和滚动条件下 Firefox、Safari 正常，而 Chrome 仍未更新，可以制作一个最小复现，并记录 Chrome 版本、操作步骤和实际表现，以便判断是否属于浏览器渲染问题。will-change 没有解决问题，不能据此确认根因；这类属性也不应替代正确的定位关系。