jQueryの$(window).load()や$(document).ready()で毎度おなじみwow.jsを設定していたのだが、iOSの環境下でブラウザバックするとそれが効かなくなる。

 

それに気づいたのはつい昨日のことだった。

 

過去に制作したサイトでその事象が発生したことの報告を受け、この摩訶不思議な現象に頭を悩ませた。

PCでのデバイスエミュレーションやAndroidでは発生せず、発生状況としては完全にiOSピンポイント。

Chrome→Safariとブラウザを変えても同じく動作しないという状況になったので、非常に手を煩わせた。

 

通常、ブラウザバック時にも、$(window).load()や$(document).ready()に設定したスクリプトのイベントは、基本的に再帰して動作する。

wow.jsで言えば、「visibility: hidden;」が付与され、スクロールイベントから一定のスクロール量と表示域に入ったら「animated」がDOM操作として要素に付与されるという一連の動作が行われる。

 

だが、iOSでは本来再帰するはずの動作が行われない。

実機で動作確認をしており、要素を検証することが出来ないため半ば憶測気味だが、動作を見ている限りではスクロールの規定値に達した際のDOM操作「animated」がどうも不発に終わっている・・・というか付与すらされていない模様。

スクロールの既定値に達しない要素では問題ないが、いずれにしても進む→ブラウザバックを繰り返すと最終的には完全に動かなくなる。

 

ここから推測・考察できることとしては、ブラウザバック前の$(window).load()や$(document).ready()の最終的な設定が当該のイベントとして保持されているため、そこから伝搬するイベントも、既に発生したイベントについては不発に終わる・・・とか、おおよそそんなところだろうと思う。

これはwow.jsに限ったことではなく、後発で設置したスクリプトや、自前で作ったスクリプトに関しても恐らく発生する恐れがあると思われる。

 

そもそも「ブラウザバックした際にも通信が発生していないだけで、ページ表示の際にwindowやdocumentは常にloadやreadyされている」という考え方からしてみれば、結構変な仕様。

基本的にクライアントサイドスクリプトであるはずのJavaScriptでちょっとこれはおかしい・・・。（無論、node.jsとかの例外はあるけど）

 

まぁ問題が発生して何も対処しないわけにもいかないので、windowがloadないしdocumentがreadyされたとき、これに相似してページが表示されたときに何かのイベントが発生しないかと思ってMDNさんあたりでJavaScriptのチュートリアルを漁ってみた。

すると’pageshow’というイベントがどうも用意されているようで、まぁこれならいけそうじゃんってことで、wow.jsの設定方法を変えてみた。

 

設定したコード

(function($) {
	var ua = window.navigator.userAgent.toLowerCase();
	if( ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 ){
		// iOS系端末用
		window.addEventListener('pageshow', function() {
			new WOW().init();
		});
	} else {
		// 他端末用
		$(window).load(function() {
			new WOW().init();
		});
		/* readyでやる場合
		$(document).ready(function() {
			new WOW().init();
		});
		*/
	}
})(jQuery);

 

ユーザエージェントがiOS系の端末であるときのみpageshowをイベントリスナーに追加する。

$(window).load()や$(document).ready()が正常に再帰して動作する端末に関しては余計なことをしなくてもいいので分岐しておく。

とりあえずこれで対処したところ、目論見通りうまいこといけた。

無難にaddEventListener使ってるけど、同イベントの上書きが気にならなければonpageshowとかでもいいと思う。

 

 

よもやま話だけど、最近のiOSのブラウザ動作って何かむか～しのIEを彷彿させるような動作が多い気がする。

ことiOSブラウザの特定条件下で描画がおかしかったりして、既に不具合確認しているものもいくつかあるし・・・。

 

ホームページの黎明期じゃあるまいし、今になってIE5.5やIE6を思い出すようなブラウザ仕様(草)の対処の繰り返しはもうカンベンしてほしい。