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

I have been trying to find a workaround to overflow:hidden not applying to fixed elements, and I came across clip and clip-path. As clip is deprecated, I am trying to use clip-path to create the desired effect. I have successfully created the effect I am looking for in both Firefox and Safari, but the clip-path function does not appear to be working in Chrome.

I've included the current HTML and CSS below; the desired effect is for each title and subtitle to only be visible when their respective parent element is in view. If you are viewing on Firefox or Safari this should be working appropriately. However, if viewing on Chrome you should see that the clip-path function is not applying and therefore you can see both titles and subtitles at the same time when viewing the first parent element (the turquoise rectangle).

As you can see in the code, I am using clip-path: fill-box which works in both Firefox and Safari, but not Chrome. I've also tried inset(0), which still works in FF/Safari but it too fails in 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>

CodePudding user response：

I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned 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>