質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JSF

JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

iOSで最初だけ画面が真っ白になる

TITO_T
TITO_T

総合スコア2

JSF

JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

0評価

1クリップ

806閲覧

投稿2020/08/21 01:34

編集2022/01/12 10:55

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

miyabi_takatsuk

2020/08/21 01:48

ソースコード、 (HTML、CSS、JavaScript) 記載しましょう。 質問文は修正できます。 コードはコードブロックを使ってください。 ```ここに言語を入力 コード ``` という形式です。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JSF

JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。