滚动时内容消失

Question

我建立了一个网站，可以在其中使用网络摄像头流式传输视频并在其上放置过滤器。我在#filters中将overflow-x: scroll;设置为可以水平滚动。但是，当我滚动时，过滤器类中的内容消失了。

我找不到有关此的任何信息，我认为问题很奇怪。

我尝试在.filter中将z-index: 10000;设置为放置在视频的前面，但这没做任何事情。另外，我尝试不再播放视频，如果再滚动，它也不会消失。

我认为我使用的浏览器是chrome出现问题，或者我不能使用那么多视频。

在摘录片段中播放视频可能不起作用，因此您不会看到内容消失。但是，它可以让我在代码编辑器中进行流式传输，因此只需忽略它即可。

以下是codepen上整个网站的代码，可让我流式传输视频：https://codepen.io/anon/pen/aXxpxG

以下是优先区域的代码：

var video = document.querySelector("#video");
var video_3 = document.querySelector("#video-3");
var filter_1 = document.querySelector("#filter-1");
var filter_2 = document.querySelector("#filter-2");
var filter_3 = document.querySelector("#filter-3");
var filter_4 = document.querySelector("#filter-4");
var filter_5 = document.querySelector("#filter-5");

// Asking for permission to the webcam
if (navigator.mediaDevices.getUserMedia) {       
        navigator.mediaDevices.getUserMedia({video: true})
    .then(function(stream) {
        video.srcObject = stream;
        video_3.srcObject = stream;
        filter_1.srcObject = stream;
        filter_2.srcObject = stream;
        filter_3.srcObject = stream;
        filter_4.srcObject = stream;
        filter_5.srcObject = stream;
    })
    .catch(function(err0r) {
        console.log("Something went wrong!");
    });
}

var close_button = document.getElementById("close");
var filter = document.getElementById("filter");
var container_3 = document.getElementById("container-3");
var show = false;

close_button.addEventListener("click", function() {
    if (show === true) {
        show = false;
    	var timesRun = 0;
        var interval = setInterval(function(){
            timesRun += 5;
            if(timesRun === 270){
                clearInterval(interval);
            }
            container_3.style.bottom = - timesRun + "px";
        }, 1);
    }
});

filter.addEventListener("click", function() {
    if (show === false) {
        show = true;
        var timesRun = 0;
        var interval = setInterval(function(){
            timesRun += 5;
            if(timesRun === 270){
                clearInterval(interval);
            }
            container_3.style.bottom = timesRun - 270 + "px";
        }, 1);
    }
});

slider_1 = document.getElementById("slider-1");
slider_2 = document.getElementById("slider-2");
slider_3 = document.getElementById("slider-3");
slider_4 = document.getElementById("slider-4");
slider_5 = document.getElementById("slider-5");

var grayscale;
var saturate;
var invert;
var hue_rotate;
var sepia;

function effect() {
    filter_1.style = "filter: grayscale(" + slider_1.value + "%);";
    filter_2.style = "filter: saturate(" + slider_2.value + ");";
    filter_3.style = "filter: invert(" + slider_3.value * 100 + "%);";
    filter_4.style = "filter: hue-rotate(" + slider_4.value + "deg);";
    filter_5.style = "filter: sepia(" + slider_5.value + "%);";
    grayscale = "grayscale(" + slider_1.value + "%)";
    saturate = "saturate(" + slider_2.value + ")";
    invert = "invert(" + slider_3.value * 100 + "%)";
    hue_rotate = "hue-rotate(" + slider_4.value + "deg)";
    sepia = "sepia(" + slider_5.value + "%)";
    overlay.style.filter = grayscale + " " + saturate + " " + invert + " " + hue_rotate + " " + sepia;
    context.filter = grayscale + " " + saturate + " " + invert + " " + hue_rotate + " " + sepia;
}

slider_1.addEventListener("input", function() {
    effect();
});

slider_2.addEventListener("input", function() {
    effect();
});

slider_3.addEventListener("input", function() {
    effect();
});

slider_4.addEventListener("input", function() {
    effect();
});

slider_5.addEventListener("input", function() {
    effect();
});

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#container {
    height: 450px;
    width: 600px;
    position: relative;
    top: 0;
    float: left;
    margin-top: 30px;
    margin-left: 30px;
    border: 10px solid rgba(51, 49, 52, .7);
}

#video {
    background-color: white;
    pointer-events: none;
}

#overlay {
    transition: .25s;
}

#filter {
    position: absolute;
    font-family: "Times New Roman", serif;
    font-weight: bold;
    font-size: 20px;
    width: 200px;
    color: white;
    bottom: 10px;
    z-index: 1;
    border-radius: 15px;
    padding: 17.5px;
    outline: none;
    border: none;
    opacity: .9;
    background-color: #333134;
    transition: .25s;
    left: 50%;
    float: none;
    transform: translateX(-50%);
}

#filter:after {
    content: "Normal";
}

#container-3 {
    overflow-y: hidden;
    overflow-x: hidden;
    position: fixed;
    height: 270px;
    width: 100%;
    z-index: 1000;
    left: 0;
    bottom: -270px;
    border-top: 10px solid rgb(51, 49, 52);
}

#filters {
    height: 270px;
    width: 100%;
    z-index: 10000;
    left: 0;
    bottom: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: white;
    white-space: nowrap;
}

#video-3 {
    background-color: white;
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
    filter: blur(50px);
    -webkit-filter: blur(50px);
    -moz-transform: scaleX(-1.1);
    -o-transform: scaleX(-1.1);
    -webkit-transform: scaleX(-1.1);
    transform: scaleX(-1.1);
    filter: FlipH;
    -ms-filter: "FlipH";
    pointer-events: none;
}

#close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10000000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: none;
    border: none;
    opacity: .7;
    background-color: #333134;
    transition: .25s;
}

.filter {
    height: 240px;
    width: 320px;
    position: relative; 
    display: inline-block;
    margin-left: 10px;
    border: 5px solid rgba(51, 49, 52, .7);
    z-index: 100000;
    top: 50%;
    transform: translateY(-50%);
    transition: .25s;
}

.filter-text {
    position: absolute;
    font-family: "Times New Roman", serif;
    font-weight: bold;
    font-size: 20px;
    color: white;
    bottom: 10px;
    z-index: 1000000;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                    0px 8px 13px rgba(0,0,0,0.1),
                    0px 18px 23px rgba(0,0,0,0.1);
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

.filter video {
    background-color: white;
    pointer-events: none;
    transition: .25s;
}

.filter input {
    position: absolute;
    top: 10px;
    height: 20px;
    width: calc(100% - 20px);
    outline: none;
    left: 50%;
    border-radius: 75px;
    opacity: 0.7;
    -webkit-appearance: none;
    background: #333134;
    transform: translateX(-50%);
    transition: .25s;
    z-index: 1000000;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
}

@keyframes fade {
    from {
        color: rgba(255, 255, 255, 0);
    }
    to {
        color: rgba(255, 255, 255, 1);
    }
}

#filter:hover, #close:hover, .slider:hover {
    background-color: #646167;
}

.fa:hover {
    background-color: #8fa1c9;
}

.fa:active {
    background-color: #d0d8ea;
}


#filter:hover:after {
    content: "More filters";
    animation: fade .25s;
}

#filter:active, #close:active, .slider:active {
    background-color: #a8a8a8;
}

<!DOCTYPE html>

<html>
    <head>
        <title>Selfie Snap</title>
        <link href="webcam.css" type="text/css" rel="stylesheet">
        <link href="nav.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <div id="overlay">
                <video autoplay="true" id="video" height="450" width="600"></video>
            </div>
            <button id="filter"></button>
        </div>
        
        <div id="container-3">
            <video autoplay="true" id="video-3"></video>
            <button id="close"></button>
            <div id="filters">
                <div class="filter">
                    <video autoplay="true" id="filter-1" height="240" width="320"></video>
                    <p class="filter-text">Grayscale</p>
                    <input type="range" min="0" max="100" value="0" class="slider" id="slider-1">
                </div>
                <div class="filter">
                    <video autoplay="true" id="filter-2" height="240" width="320"></video>
                    <p class="filter-text">Saturate</p>
                    <input type="range" min="1" max="10" value="1" class="slider" id="slider-2">
                </div>
                <div class="filter">
                    <video autoplay="true" id="filter-3" height="240" width="320"></video>
                    <p class="filter-text">Invert</p>
                    <input type="range" min="0" max="1" value="0" class="slider" id="slider-3">
                </div>
                <div class="filter">
                    <video autoplay="true" id="filter-4" height="240" width="320"></video>
                    <p class="filter-text">Hue-rotation</p>
                    <input type="range" min="0" max="270" value="0" class="slider" id="slider-4">
                </div>
                <div class="filter">
                    <video autoplay="true" id="filter-5" height="240" width="320"></video>
                    <p class="filter-text">Sepia</p>
                    <input type="range" min="0" max="100" value="0" class="slider" id="slider-5">
                </div>
            </div>
        </div>
        <script src="webcam.js"></script>
    </body>
</html>

这是针对学校项目的。 我将不胜感激。