●前提
iOS12端末(iPhone、iPad)でiframeで以下の設定がされた画面を閲覧すると、背景画像が表示されなくなったり、一部しか表示されない状態になります。
●iframeで埋め込まれる側の設定
(1).div要素に背景画像を指定(bacground-image)
(2).(1)の背景画像のサイズを背景領域を完全に覆う(bacground-size:cover)を指定
(3).(1)の背景画像を指定した要素の配置方法を固定配置(positon:fixed)
(4).(1)の要素の上にテキスト要素を配置(positon:relative)
●iOS12端末(iPhone、iPad)での表示
・iframeに表示されている背景画像が上部だけ表示され表示が固定されず、絶対配置(position:absolute)をしたような表示になります。
・iframeエリアの上部にコンテンツが配置された場合(iframeエリアが画面下の方になった場合)背景画像が全く表示されなくなります。
※iframeの表示位置によって背景画像の表示のされ方が違うようです。
●現状までに確認していること
・iOS11の端末ではこの事象は確認できませんでした(iOS12にバージョンアップした場合に発生しているようです)
・上記(2)の背景画像の配置方法を positon:fixed から positon:absolute に変更すると背景画像は表示されるようになります
・埋め込み側のHTMLを直接iOS12端末(iPhone、iPad)で閲覧すると問題なく背景画像が固定配置されます。
・iframeに直接画像指定すると画像が表示されることをご提案いただき、確認できました。
●解決したいこと
iOS12端末(iPhone、iPad)からアクセスされた場合も、背景画像が固定配置で表示されるようにしたいです。
前述しました通り配置方法を positon:absolute に変更すると背景画像は表示されるようになりますが、
絶対配置となり背景画像の高さが足りなくなった場合の対処が必要になるため、固定配置で閲覧できるようにしたいです。
またiframeで画像を指定すると表示されるようになりますが、利用シーンがiframe側を編集できないため埋め込み側のコード改修で解決したいです。
●HTMLサンプル
iOS12端末(iPhone、iPad)で閲覧すると本件事象が発生するHTMLサンプルを用意しました。
iframeを画面上部に配置したサンプル(背景画像の上部だけ表示されます)
http://dotr.jp/check/index.html
iframeを画面中ほどに配置したサンプル(背景画像が表示されなくなります)
http://dotr.jp/check/index2.html
iframeで直接画像指定したサンプル(背景画像が表示されます)
http://dotr.jp/check/result.html
ご提案いただいた埋め込み側のbodyに背景画像を表示するサンプル
http://dotr.jp/check/result2.html
●iframeを配置したコード
<style> body{text-align:center;} iframe{width:90%; height:80%; margin:800px auto 80px; border:1px solid #ddd;} </style> <iframe src="contents.html" width="100%" frameborder="0"></iframe>
●iframe埋め込み側のコード
<style> .contents{ text-align:center; position:relative; z-index:2; } .contents .inner{ width:80%; margin:10% auto; text-align:left; background-color:rgba(255,255,255,.5); padding:20px; } .background{ width:100%; height:100%; position:fixed; top:0; z-index:1; background-image:url(photo.jpg); background-size:cover; background-position:top center; } </style> <div class="contents"> <div class="inner">…テキストが入ります…</div> </div> <div class="background"></div>
Windows環境やmac OSなどでは本件事象は発生していないようですので、iOS特有の事象なのかと推測しています。
何かご存知の事がございましたら、教えて頂けますと大変助かります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/04 00:44
2018/11/04 23:21
2018/11/06 08:33