iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題

 テストソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>予定表</title>
<style>
<!--
iframe{border: 0px none transparent; width:100%; height:100%; padding:0px; margin:0px;}
#block_banner{height:200px;}
#container{width:355px;height:405px;}
-->
</style>
</head>
<body>
<div id="block_banner">
</div><!--バナー-->
<div id="container">
<h4>予定表</h4>
<iframe src="Schedule.html#Tuesday" id="Schedule" title="予定表"></iframe>
</div>
</body>
</html>

暫定的なテストページ

http://hitorinezumi.html.xdomain.jp/template/timetable/index0.html（削除済み）

 iframeのsrcが上記のように「Schedule.html#Tuesday」とページ内リンク（#～）付きだとスマホでリンク先から飛んできた時に親ページの先頭から表示するのではなく、iframeの所までスクロールして表示されてしまう。まるで親ページのページ内リンクに飛んでいるかのよう。

確認したスマホの環境は次の通り。他のスマホでは未確認。

OS: Android 5.0.2; SH-01G Build/S9280
Chrome: 90.0.4430.66

 原因不明。

2021/4/23 18:30頃。

 追記：2021/4/24  24:30頃。

2014年10月16日にたぶんPCのChromeで似た症状が報告されていたみたい。

 iframe causes parent elements to scroll up on Google Chrome when URL contains fragment

 追記：2021/4/25 8:00頃。

 iframeのsrcにページ内リンク（#～）があることが問題なのではなくて、ページを開いた時にiframeがスクロールすると親ページもiframeの所までスクロールするらしい。iframeに読み込んだ時にスクロールするJavascriptを記載することで確認できる。

暫定時間なテストページ

http://hitorinezumi.html.xdomain.jp/template/timetable/index3.html（削除済み）

 追記：2021/5/6 13:40頃。

スマホで見た場合に限らず、PCのChromeでも同じ症状があるらしい。

2011/11/12の記事。
「【珍現象】iframeのsrcに”#”を指定すると at softelメモ」

私が作ったページでも確認。

http://hitorinezumi.html.xdomain.jp/template/timetable/index3.html（削除済み）

 追記：2021/5/6 20:00頃。

続き→【Chromeではiframeで表示するページがfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題】

 

 

 

 

コメント

コメントを投稿