ソースコード、
（HTML、CSS、JavaScript）
記載しましょう。
質問文は修正できます。
コードはコードブロックを使ってください。
```ここに言語を入力
コード
```
という形式です。
Webサイトの構築をしており、アニメーション処理を行いました(Scrollmagic.js)。
パソコン上からレスポンシブで検証した際は問題なく全ての動作が行われていたのですが、
iphoneの実機でのテストとなると最初の画面だけ真っ白になってしまいました。
ある程度スクロールして元の場所に戻ると問題なくしっかり要素が表示されていますし、再度下にスクロールすると正常に動きます。
最初だけなぜか真っ白なのです。Androidではこれは起こりませんでしたのでiOSのみの現象です。
ちなみに、検証ツールでみましたところ要素自体は存在しています。
ただなぜかopacityを調整してもdisplayをいじってみても画面に表示されません。
原因として考えられるものを教えていただけますと幸いです。
HTML
<header class="head-hero" id="top"> <span id="trigger"></span> <div class="container"> <!-- SVG --> <div class="svg-container" > <svg id="svgVideo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 1080" width="1440px" height="1080px" preserveAspectRatio="xMidYMid slice"> <defs> <!-- Mask --> <mask id="mask" x="0" y="0" width="1480" height="1080" > <rect x="0" y="0" width="1480" height="1080" class="svgVideo_rect"/> <text x="37.5%" y="6.1em" class="pc-only">X</text> </mask> </defs> <rect x="0" y="0" width="1480" height="1080" class="upper_rect"/> </svg> </div> <div class="video-container"> <video id="video" muted="muted" source="mp4" preload="auto" loop="loop"muted playsinline> <source src="./video/r2_sample.mp4" type="video/mp4"> </video> </div> </div> </header>
CSS
.container { height: 100vh; width: 100%; position: relative; overflow: hidden; } .video-container { position: absolute; width: 1480px; height: 810px; } .svg-container { font-family: "Hiragino Kaku Gothic ProN","Helvetica Neue", "Helvetica", "Hiragino Sans","Arial", "Yu Gothic", "Meiryo", sans-serif; font-size: 6.1em; letter-spacing: -4px; z-index:1; width: 100%; height: 100%; position: relative; font-weight: bold; top: 0; transition-property:z-index; -webkit-transition-property:z-index; -moz-transition-property:z-index; -o-transition-property:z-index; -ms-transition-property:z-index; opacity:1; } .cover{ overflow: hidden; } #svgVideo { width: 100%; height: 100%; overflow: visible; display: block; } #svgVideo text { text-anchor: middle; } #svgVideo mask rect { fill: rgba(255, 255, 255, 0.8); fill: white; -webkit-fill:white; } .upper_rect { fill: white; background-clip: text; -webkit-fill:white; -webkit-mask: url(#mask); -moz-mask: url(#mask); -o-mask: url(#mask); -ms-mask: url(#mask); mask: url(#mask); -webkit-mask-image: url(#mask); -moz-mask-image: url(#mask); -o-mask-image: url(#mask); -ms-mask-image: url(#mask); mask-image: url(#mask); } .video-container { position: absolute; top: 0%; left: 0%; z-index: -1; min-height: 100%; min-width: 100%; width: 100vh; height: 230px; /* width: 100%; height: 100vh; */ -webkit-transform: matrix(1.2, 0, 0, 1.2, 0, 0); -moz-transform: matrix(1.2, 0, 0, 1.2, 0, 0); -o-transform: matrix(1.2, 0, 0, 1.2, 0, 0); -ms-transform: matrix(1.2, 0, 0, 1.2, 0, 0); transform: matrix(1.2, 0, 0, 1.2, 0, 0); } video{ height: 100vh; min-height: 100vh; min-width: 100vw; width: 130vw; /* position: fixed; */ top: 0; left: 0; overflow: hidden; -webkit-transform: matrix(2, 0, 0, 2, 0, 0); -moz-transform: matrix(2, 0, 0, 2, 0, 0); -o-transform: matrix(2, 0, 0, 2, 0, 0); -ms-transform: matrix(2, 0, 0, 2, 0, 0); transform: matrix(2, 0, 0, 2, 0, 0); } .pc-only{ display: none; } .sp-only{ display: inline-block; } .middle-only{ display: none; } @media(min-width:550px){ .svg-container{ font-size: 8.5em; } .video-container{ width: 1024px; height: 590px; } video{ height: 100vh; width: 110vw; min-height: 100vh; -webkit-transform: matrix(1.3, 0, 0, 1.3, 0, 0)!important; -moz-transform: matrix(1.3, 0, 0, 1.3, 0, 0)!important; -o-transform: matrix(1.3, 0, 0, 1.3, 0, 0)!important; -ms-transform: matrix(1.3, 0, 0, 1.3, 0, 0)!important; transform: matrix(1.3, 0, 0, 1.3, 0, 0)!important; /* transform: translate(0%,15%); */ } .pc-only{ display: none; } .sp-only{ display: none; } .middle-only{ display: inline-block; } } @media(min-width:1025px){ .svg-container{ font-size: 9.2em!important; } .video-container{ width: 1440px!important; height: 810px!important; -webkit-transform: matrix(1, 0, 0, 1, 0, 0)!important; -moz-transform: matrix(1, 0, 0, 1, 0, 0)!important; -o-transform: matrix(1, 0, 0, 1, 0, 0)!important; -ms-transform: matrix(1, 0, 0, 1, 0, 0)!important; transform: matrix(1, 0, 0, 1, 0, 0)!important; } video{ height: 100vh!important; width: 100vw!important; min-height: 100%!important; min-width: 100vw!important; transform: matrix(1.4, 0, 0, 1.4, 0, 0)!important; -webkit-transform: matrix(1.4, 0, 0, 1.4, 0, 0)!important; -moz-transform: matrix(1.4, 0, 0, 1.4, 0, 0)!important; -o-transform: matrix(1.4, 0, 0, 1.4, 0, 0)!important; -ms-transform: matrix(1.4, 0, 0, 1.4, 0, 0)!important; /* transform: translate(0%,15%); */ } .pc-only{ display: block!important; } .middle-only{ display: none!important; } }
JS
// Greensock var tl = new TimelineMax(); tl.add( TweenMax.to('.video-container', 1, { scale: 1.5,opacity:1, transformOrigin: "50%, 50%", ease: Power2.easeInOut }), ) tl.add( TweenMax.to(".svg-container", 1, {scale: 40,zIndex:-1, ease:Power2.easeIn}), "-=1" ) // ScrollMagic var controller = new ScrollMagic.Controller(); // container pin var startpin = new ScrollMagic.Scene({ duration: 800 }) .setPin("#top") .addTo(controller); // tween new ScrollMagic.Scene({ duration: 550 }) .setTween(tl) .addTo(controller); window.addEventListener('load', function(){ //1000ミリ秒（1秒）毎に関数「showNowDate()」を呼び出す setInterval("clientWidth()", 1000); }); function clientWidth(){ let client_w = window.pageYOffset; if(client_w > 400){ $('video').get(0).play(); } else { $('video').get(0).pause(); } }
まだ回答がついていません
会員登録して回答してみよう
