Chrome的一个问题：在行内弹性盒容器中的绝对定位元素，使用clip-path将其裁剪到屏幕外时，滚动到某个位置就不可见

前端开发 2026-07-11

我有下面这段测试代码，其中在一个 inline-flex 元素中放了好几个 div。最后一个 div 包含一些“秘密”的文本。这个文本不应该滚动，因此它的位置在 absolute。这些 div 之间有间隙，但我只想在滚动到末尾时才显示秘密文本，因此我用 clip-path 来防止文本过早出现。这在Firefox（148.0.2）和Safari（26.3）上可以工作，但在Chrome（145）上就不行。在Chrome上，即使滚动到，文本也保持不可见。调整窗口大小就足以更新它的可见性。这是一个bug吗，还是我漏掉了什么？

.wrapper {
  border: solid red;
  overflow: auto;
}

.flex-container {
  height: 50vh;
  display: inline-flex;
}

.onscreen {
  width: 20vw;
  margin: 0 1vw;
  background: #aaf;
}

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

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

<div class="wrapper">
  <div class="flex-container">
    <div class="onscreen">1</div>
    <div class="onscreen">2</div>
    <div class="onscreen">3</div>
    <div class="onscreen">4</div>
    <div class="onscreen">5</div>
    <div class="offscreen">
      <div class="offscreen-secret">
        Hidden text that does not appear between the onscreen divs
      </div>
    </div>
  </div> <!-- flex-container -->
</div> <!-- wrapper -->

注：我尝试在 .offscreen 中添加 will-change: scroll-position 和 auto，在 .offscreen-secret 中添加也无济于事。

解决方案

将 position: absolute 替换为 position: fixed 对我有用，在Mac上（感谢 @Benjamin Beinder通过链接这个问题找到的）。并且看起来在Windows也需要 transform: translateZ(0)。

.wrapper {
  border: solid red;
  overflow: auto;
}

.flex-container {
  height: 50vh;
  display: inline-flex;
}

.onscreen {
  width: 20vw;
  margin: 0 1vw;
  background: #aaf;
}

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

.offscreen-secret {
  position: fixed; /* previously absolute */
  right: 1em;
  transform: translateZ(0); /* perhaps needed on Windows */
}

<div class="wrapper">
  <div class="flex-container">
    <div class="onscreen">1</div>
    <div class="onscreen">2</div>
    <div class="onscreen">3</div>
    <div class="onscreen">4</div>
    <div class="onscreen">5</div>
    <div class="offscreen">
      <div class="offscreen-secret">
        Hidden text that does not appear between the onscreen divs
      </div>
    </div>
  </div> <!-- flex-container -->
</div> <!-- wrapper -->

Chrome