剪辑路径在 Chrome 中无法正常工作（在 Firefox 和 Safari 中有效）答案

【问题标题】：clip-path not working as expected in Chrome (works in Firefox and Safari)剪辑路径在 Chrome 中无法正常工作（在 Firefox 和 Safari 中有效）
【发布时间】：2021-12-30 06:39:10
【问题描述】：

我一直试图找到一种解决方法来溢出：隐藏不适用于固定元素，我遇到了剪辑和剪辑路径。由于不推荐使用剪辑，我正在尝试使用剪辑路径来创建所需的效果。我已经成功地在 Firefox 和 Safari 中创建了我正在寻找的效果，但剪辑路径功能似乎在 Chrome 中不起作用。

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

正如您在代码中看到的，我使用的是 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>

【问题讨论】：

标签： css clip clip-path

【解决方案1】：

我决定玩一点 Javascript。我对 HTML 和 CSS 做了一些改动。 subchilds 位于 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>

【讨论】：

这很好用！理想情况下，我想找到一个纯 CSS 解决方案，但这绝对回答了我的问题，并且是我可以实施的合适解决方案。感谢您的观看！
我使用了 3 个部分。当然，Javascript 可以针对更多部分进行优化。
经过仔细检查，虽然这仍然是一个可用的解决方案，但并不十分完美。剪辑路径（当它工作时）的好处是，如果您要在 2 个父 div 中居中放置一行文本，您将能够阅读“第一个标题”的上半部分和“第二个标题”的下半部分.使用 JS 解决方案，只是有一个过渡点，“第一个标题”完全消失，“第二个标题”出现。