###前提・実現したいこと
HTML,CSS,JavaScrriptを用いて単一スクロールのホームページを作成しています。
複数要素を縦に並べて表示しており、その中の一つの要素でmp4(H.264)動画を背景に使っています。
色情報を落としたくないという理由でgifの仕様は検討しておりません。
###発生している問題
ブラウザ間で動作に差が生じています。
パソコンのsafariで閲覧時に、スクロールすると背景動画があるべき場所からずれてしまうという問題が生じています。見た目としては、スクロールに対して背景動画の位置の更新がかなり遅れているというような状態です。
chrome,opera,IE,firefoxでは本来意図しているような、スクロールに従い滑らかに=要素の位置と同じ位置に背景動画が表示されるという動作をしています。
###該当のソースコード
HTML
1<div> 2 <video src="filename.mp4" class="background" loop autoplay playsinline></video> 3 <div class="text"> 4 <p>~~~~</p> 5 </div> 6</div>
CSS
1.background{ 2 position: fixed; 3 z-index: -1; 4 left: 0; 5 top:0; 6 background-size: cover; 7}
###試したこと
情報収集をしましたが、解決策が見つかっていません。
回答2件
あなたの回答
tips
プレビュー