Firefox/IEのバックグラウンドの可視性のバグ

Question

http://lifesocks.me/（JSとSkrollrを使用）の 'ワイプスクロール'機能に興味を持ち、CSSなしでそれを達成しようとしたかったネイティブスクロールをハイジャックします。

私はかなりそこに道の90％を取得するために管理： http://codepen.io/iamkeir/pen/yJKJNG

html, body { height: 100%; } 
 
a { color: white; } 
 
a:hover { text-decoration: none; } 
 

 
.slide { 
 
    height: 100vh; 
 
    position: relative; 
 
    z-index: 1; 
 
    font-size: 10vw; 
 
    color: white; 
 
    text-align: center;  
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.slide__inner { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

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

<div class="slide slide--1"> 
 
    <div class="slide__inner"><a href="#test-1">Slide 1</a></div> 
 
</div> 
 

 
<div class="slide slide--2"> 
 
    <div class="slide__inner"><a href="#test-2">Slide 2</a></div> 
 
</div> 
 

 
<div class="slide slide--3"> 
 
    <div class="slide__inner"><a href="#test-3">Slide 3</a></div> 
 
</div> 
 

 
<div class="slide slide--4"> 
 
    <div class="slide__inner"><a href="#test-4">Slide 4</a></div> 
 
</div>

2つの問題が残っている：

1）背面可視性のトリックはしていないようですFirefoxまたはIE11/Edgeで動作しますが、なぜそれがわかりません。

2）Zインデックススタックのため、前のスライドのテキスト/リンクは、最後のスライドが基本的に「上に」あるため、対話できません。

2については、私は、現在のスライドをZインデックススタックの一番上に持ってきてJSを使ってみましたが、これはすごいです。スライドが「現在」の場合、途中でですか？

が1のバグと2

EDITここ

JS「フォーカス」機能のCodepenがあるため任意のアイデアの両方での他の入力を取得するために素晴らしいことだ - 私が言ったように、 clunky！ http://codepen.io/iamkeir/pen/akxRwj

Answer 1

バックグラウンドの可視性「トリック」はChrome/Webkitのバグのように聞こえます。 overflow: hiddenは、包含ブロックがoverflow: hidden要素の外側にある要素には適用されません。

あなたが探している効果は、clipプロパティを使用して達成できます。 clipプロパティは、ブロック子孫を含むだけでなく、すべての子孫に適用されます。例については、this BBC pageを参照してください。

残念ながら、clipプロパティはposition: absolute要素にのみ適用されるため、1つのスライドに3つの要素が必要です。ここではあなたがそれを行う方法は次のとおりです。

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

<div class="slide slide--1"> 
 
    <div class="slide__wrapper"><div class="slide__inner"><a href="#test-1">Slide 1</a></div></div> 
 
</div> 
 

 
<div class="slide slide--2"> 
 
    <div class="slide__wrapper"><div class="slide__inner"><a href="#test-2">Slide 2</a></div></div> 
 
</div> 
 

 
<div class="slide slide--3"> 
 
    <div class="slide__wrapper"><div class="slide__inner"><a href="#test-3">Slide 3</a></div></div> 
 
</div> 
 

 
<div class="slide slide--4"> 
 
    <div class="slide__wrapper"><div class="slide__inner"><a href="#test-4">Slide 4</a></div></div> 
 
</div>