CSS白层干扰

Question

我有一个带幻灯片和社交分享图标的网站.当您滚动到页面底部并单击社交分享按钮正上方的滑动框时(当这两个按钮相互跟随时发生),滑动面板上会出现一个白色图层1,滚动后会消失.这只发生在chrome和opera上.该网站和完整的CSS代码.这样做的具体代码如下.

.socialPlugin .socials .fa {
    height: 2.5em;
    font-size: 2em;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 2.5em;
    -webkit-backface-visibility: hidden;
}

.socialPlugin .socials .fa:before, .socialPlugin .socials .fa:after {
    left: 0;
    position: absolute;
    text-align: center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    top: 50%;
    width: 100%;
}

Answer 1

似乎更换

.cd-fixed-bg.cd-bg-1{   
    background-image: url("../img/slideover/cd-background-2.jpg");
}

对于

.cd-fixed-bg.cd-bg-1{   
    background: url("../img/slideover/cd-background-2.jpg");
}

解决了这个问题.

Answer 2

刚刚对此进行了测试，这是您的修复方法。

.slide-over.open .cd-fixed-bg{
    opacity:0;
}

.slide-over.open[style="right: 0px;"] .cd-fixed-bg{
    opacity:1;
}

当面板达到 0px 时专门定位。