質問: ### 前提・実現したいこと 質問させていただきます。 現在治療院のホームページにて、道案内のためにGoogleストリートビューを埋め込んで使用しています。 PCからの閲覧では問題ありません。 しかし、スマホでの閲覧時にストリートビューの画像にタッチすると、ページの最下部近くまでページスクロールで飛ばされてしまって、元の位置に戻ると、タッチしたストリートビューは空の方を向いている状況です。 これをタッチしても下に飛ばされないようにしたいです。 有識者の方々、是非よろしくお願い致します。 ### 発生している問題 HPの問題のページです(http://ebi-seitai.com/company/streetview/#a01) スマホでの閲覧時にストリートビュー埋込画像をタッチするとページ最下部に飛ばされてしまう。 原因かわかりませんが、私の使用しているスマホはiphone6です。 ### 該当のソースコード ソースコード等は見当たりませんでした。 ### 試したこと 同様の問題に対策しているHPを探してみましたが、見当たりませんでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) サーバーはエックスドメインの無料サーバー ワードプレスのバージョンはWordPress 4.8 PHPはPHP7.0.7
回答: スマホと書かれてますが、これはiOS端末固有の問題でGoogleがAppleへ嫌がらせをしているのかと勝手に思っています。 尚、Android端末ではこの現象は起きません。 誤魔化しのような回避策ですが以下をCSSファイルへ追記すれば良いわけですが、iframeを遅延ロードしている場合にこれを行うとiframeの遅延ロードは使えない?ので、どちらかを諦めざるを得ません。 ``` body, html { height:100%; overflow:auto; -webkit-overflow-scrolling: touch; } ``` iframeに限らず画像の遅延ロードにも影響しますので、これを行う事で他のコンテンツに影響が出ないかしっかりと確認してください。 もし何か問題が起きるようならCSSを別ファイルにして当該ページだけこのCSSを読み込むようにするなど工夫してください。 追加しました ``` body,html{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;}'; } ?> ```