latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

Redraw problem in Safari and Chrome

Safari, MobileSafari, Chrome, Chrome for Android で再描画の不具合(?)があるようです。

以下のページを表示し、画面の端までスクロールすると描画漏れが発生します。

iPhone3GS (iOS 6.1)
f:id:uupaa:20130206002426j:plain

iPhone4S (iOS 5.1.1)
f:id:uupaa:20130206001713p:plain

Chrome:
f:id:uupaa:20130206001947p:plain

<!DOCTYPE html><html><head>
        <meta charset="utf-8">
<!--
        <meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
 -->

<script>
var _index = 0;
window.onload = function() {
    setInterval(function() {
        _index = ++_index;

        switch (_index) {
        case 0: document.body.style.backgroundColor = "#000"; break;
        case 1: document.body.style.backgroundColor = "#F00"; break;
        case 2: document.body.style.backgroundColor = "#0F0"; break;
        case 3: document.body.style.backgroundColor = "#FF0"; break;
        case 4: document.body.style.backgroundColor = "#00F"; break;
        case 5: document.body.style.backgroundColor = "#F0F"; break;
        case 6: document.body.style.backgroundColor = "#0FF"; break;
        case 7: document.body.style.backgroundColor = "#FFF"; _index = 0; break;
        }
    }, 3000);
};
</script>
</head><body>
<pre>

    Lorem ipsum dolor sit amet

















    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





















    Lorem ipsum dolor sit amet

</pre>
</body></html>

Android Browser, IE 10 (PC), Firefox (PC) では発生しません。
<meta name="viewport"> はあってもなくても発生します。