Z-インデックスが負の絶対配置HTML5ビデオ要素がWebkitブラウザで背景アタッチメントを破る

Question

HTML5ビデオ要素を背景レイヤとして使用していますが、これは問題なく動作しますプロパティーはbackground-attachment: fixedです。背景画像が剥がれたり、壊れたり、完全に消えたりする。私がビデオラッパーdivのz-indexを何かポジティブに変更すると、問題は消えますが、それはバックグラウンドレイヤーとして使用する目的を破ります。この問題はWebkitブラウザ（ChromeとSafari）でのみ発生しています。

ここでは基本的なHTMLです：

<section class="fixed-background"> 
    <p>...</p> 
</section> 

<section> 
    <div class="video-background"> 
     <video loop autoplay muted> 
      <source src="video.mp4" type="video/mp4"> 
      <source src="video.webm" type="video/webm"> 
     </video> 
    </div> 
    <p>...</p> 
</section> 

<section class="fixed-background"> 
    <p>...</p> 
</section> 

とCSS：

.fixed-background { 
    background: url('image.jpg') center center; 
    background-size: cover; 
    background-attachment: fixed; 
} 
.video-background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    z-index: -1; 
} 
.video-background video { 
    min-width: 100%; 
    min-height: 100%; 
} 

は、私は、問題を示すサンプルJSFiddleを作成しました。 Firefoxでは正常に動作しますが、Chrome/Safariでは動作しません。

Answer 1

修正プログラムを見つけましたか？ 私は同じ問題を抱えていますが、サファリでしかありません。

この投稿は私のために修正されました。

Chrome position:fixed inside position:absolute breaking with iframe/video

すべての位置にこれを追加：固定;要素

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0); 

Answer 2

私は同じ問題に遭遇しました。 Coreyの修正で、私のbackground-attachment: fixed要素のバグが解決されませんでした。

しかし、私はそれを働かせることができました。 background-attachment: fixedを宣言する要素内に、私はこの作品理由として全くわからないんだけど、私は1x1ピクセルは、同様に親要素を再描画するためにブラウザを強制するからだと信じている<img style="height: 1px; width: 1px; position: fixed;">

を追加します。

PS：これはimg要素である必要はなく、任意の要素にすることができます。

ここJSFiddle

編集です：

このクローム35 Ubuntuの

Answer 3

上ませ仕事はただ、スタイリング・ルールの位置とDOM要素にHTML5のビデオを包むん：相対;オーバーフロー：隠された;これにより、すべてのブラウザのすべてが修正されます。