Backface Visibility Bug In Firefox/ie (scroll-wipe Ui Like Life Socks)

I was intrigued by the 'wiping scroll' functionality of http://lifesocks.me/ (which uses JS and Skrollr) and wanted to try and achieve it with CSS only, without hijacking native sc

Solution 1:

The backface visibility "trick" sounds like a Chrome / Webkit bug to me. overflow: hidden is not supposed to apply to elements whose containing block is outside the overflow: hidden element.

The effect you're looking for can be achieved using the clip property. The clip property applies to all descendants, not just to containing block descendants. See this BBC page for an example.

Unfortunately, since the clip property only applies on position: absolute elements, you need three elements per slide. Here's how you do it:

body { margin: 0; }
a { color: white; }
a:hover { text-decoration: none; }

.slide {
  height: 100vh;
  position: relative;
  font-size: 10vw;
  color: white;
  text-align: center;
}

.slide__wrapper {
  position: absolute;
  clip: rect(auto auto auto auto);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide--1 { background: red; }
.slide--2 { background: blue; }
.slide--3 { background: green; }
.slide--4 { background: grey; }

<divclass="slide slide--1"><divclass="slide__wrapper"><divclass="slide__inner"><ahref="#test-1">Slide 1</a></div></div></div><divclass="slide slide--2"><divclass="slide__wrapper"><divclass="slide__inner"><ahref="#test-2">Slide 2</a></div></div></div><divclass="slide slide--3"><divclass="slide__wrapper"><divclass="slide__inner"><ahref="#test-3">Slide 3</a></div></div></div><divclass="slide slide--4"><divclass="slide__wrapper"><divclass="slide__inner"><ahref="#test-4">Slide 4</a></div></div></div>