Sự can thiệp lớp màu trắng CSS

Question

Tôi có một trang web có biểu tượng trượt và biểu tượng chia sẻ xã hội. Khi bạn cuộn xuống cuối trang và nhấp vào hộp trượt phía trên nút chia sẻ xã hội (xảy ra khi hai người này theo dõi nhau), một lớp màu trắng thứ nhất xuất hiện trên bảng điều khiển trượt và biến mất sau khi bạn cuộn. Điều này chỉ xảy ra trên chrome và opera. website và full css code. Mã cụ thể làm điều này là dưới đây.

.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

Chỉ cần thử nghiệm điều này, đây là sửa chữa của bạn.

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

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

Nhắm mục tiêu cụ thể khi bảng điều khiển chạm 0px.

Answer 2

Có vẻ như thay thế

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

cho

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

giải quyết vấn đề.

Answer 3

Hãy thử xử lý "slideover1" giống như cách bạn đang thực hiện "trượt qua" nơi nó đã tồn tại và bạn đang thay đổi từ ẩn sang hiển thị.

Tôi tin rằng sự cố của bạn có thể là do việc tạo "slideover1" chỉ xảy ra sau khi bạn nhấn nút lần đầu tiên, không cho phép hiển thị khi tải.

Đây là sự nghi ngờ lén lút của tôi, vẫn rối tung với mã để xem bất kỳ vấn đề tiềm ẩn nào khác.

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