clip-path在Chrome中无法正常生效（在Firefox与Safari中可正常运行）

我明白你遇到的头疼问题了——你想用clip-path让fixed定位的标题/副标题只在对应的父元素进入视口时显示，这个效果在Firefox和Safari能正常工作，但Chrome里直接失效，所有fixed元素全都同时冒出来了。

问题根源 #

这不是Chrome的bug，而是它严格遵循CSS规范的表现：position: fixed的元素是完全相对于浏览器视口定位的，和父元素的文档流、定位上下文彻底脱离。父元素的clip-path（不管是fill-box还是inset(0)）只能作用于同一定位上下文里的子元素，对跳出上下文的fixed元素完全无效。Firefox和Safari的行为其实是不符合规范的特殊处理。

解决方案 #

下面给你两种靠谱的替代方案，都能在Chrome、Firefox、Safari中稳定工作：

方案1：替换fixed定位，让子元素留在父元素上下文里

既然fixed元素会“跑出去”不受父元素控制，那我们把subchild的定位改成absolute，让它老老实实跟着父元素parent走，这样父元素的clip-path就能正常裁剪它了。

修改后的CSS代码：

* { padding: 0; margin: 0; border: none; }
html { background-color: black; }
.info { list-style-type: none; margin-left: 13vw; padding: 0; overflow: hidden; position: fixed; color: white; z-index: -1; top: 80vh; }
.container { width: 100%; height: 110vh; position: relative; /* 新增：作为父元素的定位容器 */ }
.parent { position: absolute; width: 100%; height: 110vh; background-repeat: no-repeat; background-position: center; background-size: cover; pointer-events: none; clip-path: inset(0); /* 使用标准的inset写法 */ }
.parent_1 { background-color: turquoise; }
.parent_2 { background-color: tomato; }
.parent_3 { background-color: purple; }
.subchild { position: absolute; /* 替换fixed */ color: white; width: 60vw; left: 14vw; }
.p1, .p3 { top: 40vh; }
.p2 { top: 45vh; }

这样改完后，每个标题/副标题会跟着对应的父元素滚动，只有当父元素进入视口时才会显示，完全符合你的预期效果。

方案2：用JavaScript监听滚动，动态控制元素显示

如果你必须保留fixed定位（比如需要元素固定在视口某个位置），可以通过JavaScript监听滚动事件，判断每个父元素是否在视口内，然后动态切换对应子元素的可见性。

首先给每个子元素组加专属类名，方便和父元素关联：

<section class="container container_1">
  <div class="parent parent_1">
    <div class="child child_1">
      <p class="subchild p1 subchild-group-1"> First Title </p>
      <p class="subchild p2 subchild-group-1"> First Subtitle </p>
    </div>
  </div>
</section>
<section class="container container_2">
  <div class="parent parent_2">
    <div class="child child_2">
      <p class="subchild p3 subchild-group-2"> Second Title </p>
      <p class="subchild p2 subchild-group-2"> Second Subtitle </p>
    </div>
  </div>
</section>

然后添加JavaScript逻辑：

// 获取所有父元素和子元素组
const parentElements = document.querySelectorAll('.parent');

// 监听滚动事件
window.addEventListener('scroll', () => {
  parentElements.forEach((parent, index) => {
    const parentRect = parent.getBoundingClientRect();
    // 判断父元素是否在视口范围内
    const isParentInViewport = parentRect.top < window.innerHeight && parentRect.bottom > 0;
    // 获取对应子元素组
    const targetSubchilds = document.querySelectorAll(`.subchild-group-${index + 1}`);
    // 控制可见性
    targetSubchilds.forEach(el => {
      el.style.visibility = isParentInViewport ? 'visible' : 'hidden';
      el.style.opacity = isParentInViewport ? '1' : '0';
    });
  });
});

// 页面加载时先执行一次，避免初始状态异常
window.dispatchEvent(new Event('scroll'));

这种方案保留了fixed定位的特性，同时实现了只有父元素在视口内时子元素才可见的效果。

总结 #

优先推荐方案1，纯CSS实现更简洁，也符合规范；如果必须保留fixed定位，再用方案2的JavaScript实现。

内容的提问来源于stack exchange，提问作者attila_the_fun