Интерференция белого слоя CSS

Question

У меня есть веб-сайт со слайдом и значком социального обмена. Когда вы перейдете к нижней части страницы и щелкните по ползунку над кнопкой социальной акции (происходит, когда эти два следуют друг за другом), белый слой 1 появляется на панели слайдов и исчезает после прокрутки. Это происходит только на хроме и опере. website и full css code. Ниже приведен конкретный код.

.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

Просто проверил это, вот ваши исправления.

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

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

Ориентация конкретно, когда панель достигает 0px.

Answer 2

Похоже замена

.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 3

Попробуйте обработать «slideover1» так же, как вы делаете «скольжение», где он уже существует, и вы меняете его на скрытое на видимое.

Я считаю, что ваша проблема может возникнуть из-за создания «slideover1», которое происходит только после нажатия кнопки в первый раз, не позволяя ей отображаться при загрузке.

Это мое подозрительное подозрение, все еще возиться с кодом, чтобы увидеть любые другие потенциальные проблемы.

<div class="slide-over open" style="right: 0px;"><a href="#" data-slideover="close" class="close-x"><span class="icon-cross"></span></a> 
 
    <div id="slideover1" class="slideover-content"> 
 
\t  <div class="cd-main-content"> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-1"> 
 
\t \t \t \t <h1>Chill Out Mondays</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-scrolling-bg cd-color-2"> 
 
\t \t \t \t <div class="cd-container"> 
 
\t \t \t \t \t <p>You really don't have to know how to dance, just stand there. Move your head to the beat. Not bad, okay now a 1, 2 step with your feet. Whoa! Talk about a natural. Lingala, perfect way to let your body do the talking. Every Monday. Good music, Beautiful people.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-2"> 
 
\t \t \t \t <h2>Happy Hour Mondays</h2> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-scrolling-bg cd-color-3"> 
 
\t \t \t \t <div class="cd-container"> 
 
\t \t \t \t \t <p>Bet you woke up today like, damn, another Monday. No worries, how was work today? Don't wanna talk bout it? Ok. So what do you have planned for tonight then? Yup guessed it, huna plot. Again no worries, you need to rest, no chill. Lounge at Latitude and have yourself an easy Monday.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-3"> 
 
\t \t \t \t <h2>Mindful Mondays Twist</h2> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-scrolling-bg cd-color-1"> 
 
\t \t \t \t <div class="cd-container"> 
 
\t \t \t \t \t <p>As we wind up the day, you suddenly think to yourself, today was either pretty average or pretty stressful. Don't know about you but I like constant happy vibes to take all the stress outta my day. A couple of close friends mixed with a couple of drinks and welcome to a chilled out Monday.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-4"> 
 
\t \t \t \t <h2>Rhumba &amp; Lingala</h2> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    </div></div>