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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1215閲覧

iframe埋め込み画面で背景画像を指定している場合、iPhoneからだと背景画像が表示されません

ryohosono

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/11/03 08:00

編集2018/11/06 08:37

●前提

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特有の事象なのかと推測しています。
何かご存知の事がございましたら、教えて頂けますと大変助かります。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

iphoneのposition:fixedは期待取りの動作をしないことが多いです。
今回の件については、
背景画像を
iframeを配置した方

css

1iframe[src="contents.html"] { 2 background-image: url(photo.jpg); 3 background-size: cover; 4 background-position: top center; 5}

iframe埋め込み側

<div class="background"></div>を削除 ```css body { background-color: transparent; } ``` これで背景位置が固定されるはずです。

追記
iphone向けの有効な対策としては、position:fixedを使用しないことです。
position:fixedを使用せずに位置を固定するにはスクロール領域自体に背景を設定すればいいので、
スクロール領域をiframe内のbodyに移し、
スクロール領域(=body)に背景画像を設定します。
iframe埋め込み側

css

1html { 2 overflow: hidden; 3} 4body { 5 background-color: transparent; 6 background-image: url(photo.jpg); 7 background-size: cover; 8 background-position: top center; 9 overflow: scroll; 10}

投稿2018/11/03 15:01

編集2018/11/04 02:14
kaba

総合スコア314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryohosono

2018/11/04 00:44

ご回答ありがとうございます。 ご提案いただきました方法を試してみたところ背景画像が表示されることを確認できました。 この方法は試していなかったので、大変参考になりました。 ありがとうございます。 今回の事象は私が運営しているWebサービスで発見された事象です。 このサービスではオリジナルのフォームを作成できるサービスで 背景画像はこのフォーム側で設定しています。 フォームから直接使用されるケースも、iframeで埋め込んで使用されるケースも どちらのケースもあるため、極力フォーム側のコードで解決したいと思っています。 前提で記載しておらず、申し訳ございません。 フォーム側のコード改修で改善できる方法やヒントになりそうなことなど ご存知でしたら教えて頂けますと幸いです。
ryohosono

2018/11/04 23:21

度々ご回答頂きましてありがとう iframe埋め込み側のbodyでの設定を試してみたいと思います。 検証後、改めて報告させていただきます。 取り急ぎお礼まで。
ryohosono

2018/11/06 08:33

お返事が遅くなりまして申し訳ございません。 ご回答いただきました設定を試してみたところ、期待通りの表示になることが確認できました! 〇検証サンプル http://dotr.jp/check/result2.html 弊サービスでは背景画像の表示方法を原寸・繰り返し・フルスクリーン表示で設定を切り替えられるようにしているのですが bodyに背景画像を固定する方法が見つけられず、背景画像表示用の要素(<div class="background"></div>)で表示するようにしていました。 htmlタグに「overflow: hidden;」で実現できるんですね!知りませんでした。 大変参考になりました。 ご提案いただきましてありがとうございます。 こちらの方法で検討してみたいと思います。 # 既に稼働しているサービスのため背景指定をbodyに切り替えるだけでも色々と課題があります。 # その課題を検討しつつ、背景画像指定先を変えずに(<div class="background"></div>のままで)解決する方法も # 引き続き調査を続けてみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問