clip-path 在 Chrome 中没有按预期工作（在 Firefox 和 Safari 中工作）

Question

我一直在努力寻找解决方法 overflow:hidden 不适用于固定元素，我遇到了 clip 和 clip-path。由于剪辑已弃用，我正在尝试使用 clip-path 来创建所需的效果。我已经成功地在 Firefox 和 Safari 中创建了我正在寻找的效果，但是 clip-path 函数似乎在 Chrome.

中不起作用

我在下面包含了当前的 HTML 和 CSS；期望的效果是每个标题和副标题仅在其各自的 parent 元素可见时可见。如果您在 Firefox 或 Safari 上查看，这应该可以正常工作。但是，如果在 Chrome 上查看，您应该会看到 clip-path 功能未应用，因此在查看第一个 parent 元素（绿松石色）时，您可以同时看到标题和副标题矩形）。

正如您在代码中看到的，我使用的是 clip-path: fill-box，它在 Firefox 和 Safari 中都有效，但在 Chrome 中无效。我也尝试过 inset(0)，它在 FF/Safari 中仍然有效，但在 Chrome.

中也失败了

* {
    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;
}
.parent {
    position: absolute;
    width: 100%;
    height: 110vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    clip-path: fill-box;
}
.parent_1 {
    background-color: turquoise;
}
.parent_2 {
    background-color: tomato;
}
.parent_3 {
    background-color: purple;
}
.subchild {
    position: fixed;
    color: white;
    width: 60vw;
    left: 14vw; 
}
.p1, .p3 {
    top: 40vh;
}
.p2 {
    top: 45vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="css/clip.css" rel="stylesheet" type="text/css">
</head>
<body>
    <section class="container container_1">
        <Div class="parent parent_1">
            <Div class="child child_1">
                <p class="subchild p1">
                    First Title
                </p>
                <p class="subchild p2">
                    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">
                    Second Title
                </p>
                <p class="subchild p2">
                    Second Subtitle
                </p>
            </Div>
        </Div>
    </section>
</body>
</html>

Answer 1

我决定和 Javascript 玩一下。我对 HTML 和 CSS 做了一些改动。 subchild 位于 top: 150px;.

 function getY(element) {
     var rect = element.getBoundingClientRect();
     return rect.bottom;
 }

let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");

let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");

document.addEventListener('scroll', function() {
    let bottom1 = getY(container1);
    let bottom2 = getY(container2);
    let bottom3 = getY(container3);
    
    if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
        subchild1.style.display = "block";
    }
    else {
        subchild1.style.display = "none";
    }
    //
    if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
        subchild2.style.display = "block";
    }
    else {
        subchild2.style.display = "none";
    }   
    //
    if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
        subchild3.style.display = "block";
    }
    else {
        subchild3.style.display = "none";
    }

});

* {
    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;
}
.parent {
    position: absolute;
    width: 100%;
    height: 110vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    
}
.parent_1 {
    background-color: turquoise;
}
.parent_2 {
    background-color: tomato;
}
.parent_3 {
    background-color: purple;
}
.subchild {
    position: fixed;
    color: white;
    width: 60vw;
    left: 14vw; 
    top: 150px;
    
}
.container_1 .subchild {
    display: block;
}
.container_2 .subchild {
    display: none;
}
.container_3 .subchild {
    display: none;
}

<section class="container container_1">
        <Div class="parent parent_1">
            <Div class="child child_1">
                <p class="subchild">
                    First Title
                </p>
            </Div>
        </Div>
    </section>
    <section class="container container_2">
        <Div class="parent parent_2">
            <Div class="child child_2">
                <p class="subchild">
                    Second Title
                </p>
            </Div>
        </Div>
    </section>
    <section class="container container_3">
        <Div class="parent parent_3">
            <Div class="child child_3">
                <p class="subchild">
                    Third Title
                </p>
            </Div>
        </Div>
    </section>

clip-path 在 Chrome 中没有按预期工作（在 Firefox 和 Safari 中工作）

clip-path not working as expected in Chrome (works in Firefox and Safari)

css

clip

clip-path