CSSの白いレイヤーの干渉

Question

私は、スライド上と社会的な共有のアイコンを持つWebサイトを持っています。ページの一番下までスクロールし、ソーシャルシェアボタンのすぐ上にあるスライドオーバーボックスをクリックすると（この2つが互いに続く場合に発生します）、スクロールするとスライドオーバーパネルに白いレイヤー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: url("../img/slideover/cd-background-2.jpg"); 
} 

ため

.cd-fixed-bg.cd-bg-1{ 
    background-image: 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>