location.hashはandroidのchromeだとフリーズするかもしれない

とあるwebアプリを作っていたのですが、検索結果を表示したあとにその表示部分にページ内遷移させるとフリーズしてしまいました。

現状の対処法を残しておきます。

Android7.1.1のxperiaで同じバージョンのchromeでは再現できなかったので、chromeというよりもAndroidのバージョンの問題なのかもしれません。

入力した地名の読みがなを表示してくれるwebアプリを作りました。

このwebアプリで実際に地名を入力すると以下のように表示されます。

f:id:aokakes:20190414165817j:plain

この場合は候補が少ないので特に問題ないのですが、候補が増えると画面をスクロールする手間が増えてしまいます。

f:id:aokakes:20190414165825j:plain

そこで、検索後に検索結果表示欄に自動で移動させることにしました。

とりあえずアンカーを使えばいいでしょう。
検索結果を表示したあとに移動させたいので、javascriptで実装してみます。

やること自体はかなり単純で、検索結果を表示する部分の直後に以下の一文を加えるだけです。

window.location.hash = "result";

これだけで理想通りの動きをするようになります。

Android以外では。
Androidの中でもchromeだと動かないようです。Firefoxでは正常に動きました。

とりあえず各ブラウザのlocationの対応状況を確認してみました。

Android版ChromeのLocationのところが？になっていますね。
なんだかこれが原因なような気がします。

それ以外の部分は対応しているので何とも言えない部分はありますが...

色々試してみたところ、hashやprefなど、データを取得することはchromeでも問題なくできるようでした。
しかし、hashなどを使って移動させようとなると話は違うようです。

移動せずにフリーズするならまだ分かるのですが、なぜか移動したあとにフリーズします。

locationはandroidのchromeでは思い通りに動かない可能性があるので使わないことにして、代替手段を探します。

少し探してみると、jqueryでスクロールさせる方法が多く見つかりました。

でも、サイトの多くがヌルッとスクロールさせるやつでした。
早く結果を知りたい人にとってはこういった機能はたぶんいらないので、パッと移動するようにします。

$(function(){
	$(window).scrollTop($('#result').offset().top);
});

これでandroidのchromeでも動くようになります。

ページ内遷移させるときはlocation.hashやlocation.hrefなどは使わず、jqueryでスクロールさせる。

手元にある別のスマホではlocation.hashでも正常に動くのでフリーズするスマホの数は少なそうではあります。

とはいえ、スマホのブラウザにおいてchromeはシェア率が高いですし、スマホからもアクセスが多いようなコンテンツでは注意したほうがいいかもしれません。

アオカケスの鳥かご