title: CSS white layer interference
body: <p>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 <a href="http://deez.site90.com/main/sun.html" rel="noreferrer">website</a> and <a href="http://deez.site90.com/main/css/plugin.css" rel="noreferrer">full css code </a>. The particular code doing this is below.</p>
  
  <pre><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%;
  }
  </code></pre>