googleストリートビューのスマホ閲覧時にページ下部に飛ばされてしまいます

Question

###前提・実現したいこと
質問させていただきます。
現在治療院のホームページにて、道案内のためにGoogleストリートビューを埋め込んで使用しています。
ＰＣからの閲覧では問題ありません。
しかし、スマホでの閲覧時にストリートビューの画像にタッチすると、ページの最下部近くまでページスクロールで飛ばされてしまって、元の位置に戻ると、タッチしたストリートビューは空の方を向いている状況です。
これをタッチしても下に飛ばされないようにしたいです。
有識者の方々、是非よろしくお願い致します。

###発生している問題
ＨＰの問題のページです（http://ebi-seitai.com/company/streetview/#a01）
スマホでの閲覧時にストリートビュー埋込画像をタッチするとページ最下部に飛ばされてしまう。
原因かわかりませんが、私の使用しているスマホはiphone6です。

###該当のソースコード
ソースコード等は見当たりませんでした。

###試したこと
同様の問題に対策しているＨＰを探してみましたが、見当たりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
サーバーはエックスドメインの無料サーバー
ワードプレスのバージョンはWordPress 4.8
ＰＨＰはPHP7.0.7

Answer 1

スマホと書かれてますが、これはiOS端末固有の問題でGoogleがAppleへ嫌がらせをしているのかと勝手に思っています。
尚、Android端末ではこの現象は起きません。

誤魔化しのような回避策ですが以下をCSSファイルへ追記すれば良いわけですが、iframeを遅延ロードしている場合にこれを行うとiframeの遅延ロードは使えない？ので、どちらかを諦めざるを得ません。

body, html {
	height:100%;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}

iframeに限らず画像の遅延ロードにも影響しますので、これを行う事で他のコンテンツに影響が出ないかしっかりと確認してください。
もし何か問題が起きるようならCSSを別ファイルにして当該ページだけこのCSSを読み込むようにするなど工夫してください。

追加しました

<?php
if ( is_page( 'ページのスラッグ' ) ) {
	echo'<style>body,html{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;}</style>';
}
?>

Comments

[ebiPT]

ありがとうございます！
まさかiOS固有だったとは…
Google先生と仲直りしてくれることだけを願うばかりです(笑)

解決策も可能性があり光明が差した思いです！
本当にありがとうございました！

[ebiPT]

上記ＣＳＳをページ指定せず書き込んでみましたが、やはり飛ばされる仕様は変わりませんでした。
もうこの際、ストリートビューより画像の方がユーザビリティが高そうなので、画像に置き換えようかと思います。
重ねてお礼申し上げます！

[退会済みユーザー]

キチンとCSSが反映されている事は確認されてますか？
WP Fastest Cacheが入ってるようですが、CSSやJSの最適化ファイルを含め全キャッシュを解放してください。
また、端末のブラウザキャッシュも同様にです。

[ebiPT]

なるほど、キャッシュの事を全く考えていませんでした。
諸事情によりあと数日iphoneのwebサイトを消すわけにいかないので、試したらまた報告させていただきます！

[退会済みユーザー]

サイトが潰れることはないと思いますが、心配ならCSSファイルをバックアップしておいた方が良いです。
BJ Lazy LoadとWP Fastest Cacheの2つのプラグインを停止させた状態で試してみてください。

[ebiPT]

やっと本日試せました！
ＣＳＳを書き換え、WP Fastest Cache で全てのCSSとキャッシュを削除した上で、上記のプラグインを停止し、iphone6でsafariのキャッシュと履歴データを削除した上で試しましたが、やはり下に飛ばされてしまいました。

CSSは以下のように記載し、当該ページに反映されている様子ではありました。
```
.page-id-1093 body,html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
```

[退会済みユーザー]

二つのプラグインを停止した状態でテーマのstyle.cssに.page-id等と余計な記述を含めずに追記して試してみてください。

[ebiPT]

できました！
ありがとうございます！

page-idが邪魔していたのでしょうか。

また、pageを指定していない状態なので他のページも確認したところ、特に異常はありませんでしたが、今後どこかに異常がみつかる可能性があるでしょうか。

[ebiPT]

すみません、早速問題が見つかりました。

スクロールすると一番上に戻るアイコンがページ右下に出て追跡するようにしていたのですが、それが表示されなくなってしまいます。

ストリートビューのページのみにページ指定できたら良いのですが。。。

[退会済みユーザー]

一番簡単なのは</head>の上にでもコードを追加して、必要なページにだけCSSを適用させる方です。
コードは回答に追加していますので、そのページのスラッグに変更して追加して試してみてください。

[ebiPT]

ご丁寧にありがとうございます！

基本すぎる質問ばかりで申し訳ないのですが、上記の構文にページ番号を足してCSSに記載したのですが、マークアップは使用できませんと返ってきました。

この構文はCSSに記載するものじゃないのでしょうか？

<?php
if ( is_page( '1093' ) ) {
echo'<style>body,html{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;}</style>';
}
?>

[退会済みユーザー]

header.phpの</head>の上に書いてください。style.cssに書いたものは消してください。

おそらく遅延ロードと干渉するので、その場合は当該ページのみ遅延ロードを効かないようにするか、iframeに遅延ロードが効かないように設定してください。
もしキャッシュプラグインを有効にして飛ばされる現象が起きる場合は当該ページをキャッシュしないようにしてください。
これらはどれも管理画面から設定で変更可能です。

[ebiPT]

ありがとうございます！
完璧に希望通りの動作をしました！
諦めかけていたので、本当にできるとは感動です！

長々とお付き合い頂きとても感謝しています！
本当にありがとうございます！