Question

我对网页设计还很陌生，我一直在研究一个纯粹的CSS分层视差页面，就像在不同深度堆叠重叠div容器的景观效果......我很高兴我能让它在铬。

然而，当我在Firefox（版本47）（使用Windows 10）中加载它时它看起来很好，直到我向下滚动。我的div和他们的内容在各种点后完全消失，当我向后滚动时再次出现。或者，我可以调整浏览器的大小，一切都可以完美重新加载，但如果我继续滚动，它会再次消失。

在IE和Edge中，完全滚动顶部后内容消失，当我向上滚动时内容不会出现。仅在调整大小后重新出现。

我已经尝试添加浏览器特定的前缀和什么没有，这根本没有帮助。我也尝试改变透视值，如同类似的帖子所述，但也没有修复它。是什么原因导致chrome与其他人之间的差异？

这是我的代码，我用颜色替换了div背景图像。谢谢 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <link href="../CSS/Styles.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <img id="bannerlogo" src="http://placehold.it/350x65">
        <div id="back1">
            <p id="text1">Splash Text 1</p>
        </div>
        <div id="back2">
            <p id="text2">Splash Text 2</p>
        </div>
        <div id="back3"></div>
        <div id="back4"></div>  
        <div id="content"></div>
        <div id="footer"></div>
    </body>
</html>

CSS：

html {
    height: 100%;
    overflow:hidden;
}

body { 
    text-align:center;
    margin:0;
    padding:0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-y: visible;
    overflow-x: hidden;
    background-image: url(../IMAGES/Layer1.jpg);
    background-size: cover;
    background-attachment:fixed;
}

#text1, #text2{
    position:relative;
    font-weight:normal;
    font-family:courier new;
}
#bannerlogo{
    width:75%;
    max-width:700px;
}
#text1{
    left:-10%;
    top:60%;
    font-size:4vw;
}
#text2{
    left:-5%;
    top:60%;
    font-size:4vw;
}
#content{
    position:relative;
    height:700px;
    width:100vw;
    background-color:rgb(3,0,20);
    z-index:10;
}

#footer{
    position:relative;
    height:150px;
    width:100vw;
    background-color:rgb(30,30,50);
    z-index:15;
}

#back1, #back2, #back3, #back4{

    position:relative;
    right:0px;
    background-size:cover;
    width:100vw;
    height:100vh;
    min-width:1280px;
    min-height:720px;
    background-size: 100% 100%;
    text-align:center;
    font-family:verdana;
    font-size: 200%;
    color:white;
    font-weight:bold;
    letter-spacing:5px;
    line-height:100%;
    transform-style:inherit;
    min-height:100vh;
}

#back1{
    background-color:rgb(100,100,150);
    transform: translateZ(-5px) scale(6) translateY(0%);
    z-index:-1;
    margin-bottom:-30vh;

}
#back2{
    background-color:rgba(100,150,100,.7);
    transform: translateZ(-2px) scale(3.5);
}
#back3{
    background-color:rgba(150,100,100,.5);
    transform: translateZ(-1px) scale(2) translateY(-25%);
}
#back4{
    min-height:0px;
    height:30vh;
    background-color:rgb(3,0,20);
    transform: translateZ(-1px) scale(2) translateY(20%);
    margin-bottom:-30vh;
}

Firefox，IE-视差div在滚动时消失

0 个答案: