CSS white layer interference

Question

I have a website with a slide over and social sharing icon. When you scroll to the bottom of the page and click the slide-over box just above the social share button (happens when these two follow each other), a white layer 1st appears on the slide-over panel and disappears after you scroll. This only happens on chrome and opera. The website and full css code . The particular code doing this is below.

.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

Seems like replacing

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

for

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

solves the problem.

Answer 2

Just tested this, here's your fix.

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

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

Targeting specifically when the panel hits 0px.

Answer 3

Try handling "slideover1" the same way you're doing "slide-over" where it already exists and you're changing it from being hidden to visible.

I believe your problem might be because of the creation of "slideover1" only happening after you press the button the first time, not allowing it to be rendered on load.

This is my sneaking suspicion, still messing with the code to see any other potential issues.

<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">
	    <div class="cd-main-content">
			<div class="cd-fixed-bg cd-bg-1">
				<h1>Chill Out Mondays</h1>
			</div>
			<div class="cd-scrolling-bg cd-color-2">
				<div class="cd-container">
					<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>
				</div>
			</div>
			<div class="cd-fixed-bg cd-bg-2">
				<h2>Happy Hour  Mondays</h2>
			</div> 
			<div class="cd-scrolling-bg cd-color-3">
				<div class="cd-container">
					<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>
				</div> 
			</div> 
			<div class="cd-fixed-bg cd-bg-3">
				<h2>Mindful Mondays Twist</h2>
			</div> 
			<div class="cd-scrolling-bg cd-color-1">
				<div class="cd-container">
					<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>
				</div> 
			</div> 
			<div class="cd-fixed-bg cd-bg-4">
				<h2>Rhumba &amp; Lingala</h2>
			</div> 
		</div> 
    </div></div>