iOS6 Mobile Safariでスクロールするとタイマーが止まるバグ?

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

setTimer, setIntervalあたりの動きが怪しい

利用者の多さと大きな期待からiOS6への指摘が多数報告されています。ということで、今回も1つ共有です。setTimerやsetIntervalが動いている最中に画面をスクロールするとタイマーが止まります。これも影響大きいかなぁ。。。

怪しい動作の確認

まずは以下のサイトをiOS6 Mobile Safariで開いて下さい。ボタンを押すとタイマーで画面の色が変わり続けます。次に画面にタッチしてスクロールしてみてください。画面の色が変わらなくなりますよね。スクロールした後に手を離すと、また色が変わり始めます。タイマー処理が止まっているっぽいです。。。

動作チェック >> iOS6 setTimer and scrolling bug ?? TRY IT on Mobile Safari

サンプルソース

サンプルソースは以下となります。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>setTimeout, clearTimeout</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; height: 3000 }
</style>
<script type="text/javascript"><!--
  function changeBGColor(){
    R = Math.floor(Math.random() * 255);
    G = Math.floor(Math.random() * 255);
    B = Math.floor(Math.random() * 255);
    document.getElementById("result").style.backgroundColor = "rgb("+R+","+G+","+B+")";
  }
  function setTimer(){
    changeBGColor();
    timerID = setInterval("changeBGColor()",500);
  }
  function clearTimer(){
    clearInterval(timerID);
  }

// --></script>
</head>

<body>
<input type="button" value="Start Timer" onClick="setTimer()">
<div id="result" ></div>
</body>
</html>

まとめ

開発会社やサービス提供会社の皆様は大変かと思いますが、ベースとなるOSやミドルウェアのバグはその場しのぎの回避コードを書くか、アップデートを待つか悩ましいところですよね。ビジネスは待ってくれませんので徹夜して対応する必要が出てくるかもしれませんし、適当に対応してデグレするかもしれません。こういった時に新しいものには手をつけないという方とリスクを受容してチャレンジする方が居ます。どちらも間違いではありません。しかし、最新を取り入れつつバグゼロを期待するのは間違いです。いち早く特性を知り、メリットとリスクを天秤にかけて、最終的には受容可能な範囲のリスクをステークホルダーが理解して進める必要があるでしょう。と、それらしいことを言って読み直すとお恥ずかしいw。次回はその場凌ぎの回避策を提示したいと思いますw。

参考資料

Understanding the iOS6 AJAX bugs - comment