sdesai · December 11, 2015 14:28
diff --git a/repaint-during-iOS-scroll b/repaint-during-iOS-scroll
 <!DOCTYPE html>
 <html>
    <head>
        <style>
            .box {
                width:100px;
                height:100px;
                background-color:red;
                position:absolute;
                top:0px;

                /* 
                   ISSUE ONE: Required to get it to repaint. Need to put it in a separate composite 
                   layer from the document (which it doesn't repaint, until the end of scroll).

                   Downside - may have GPU memory mgmt impact.
                 */
                -webkit-transform: translateZ(0);
            }

            body {
                height: 10000px;
            }

        </style>
        <script type='text/javascript' src='http://yui.yahooapis.com/3.7.3/yui/yui.js'></script>
    </head>
    <body>
        <div class="box"></div>
        <script>
            YUI().use("node", function(Y) {

                var box = Y.Node.one(".box"),
                    t1 = new Date(),
                    POLL_DELAY = 0,
                    i = 0;

                // ISSUE TWO:
                // requestAnimationFrame? touchMove? Anything
                // which messes with the event loop as opposed
                // to setTimeout/setInterval or scroll, which are
                // "paused" until scroll completes.

                // We could also try a setTimeout inside the postMessage
                // to avoid constantly re-trying postMessage. Maybe they let
                // setTimeouts inside a postMessage through? Or webworkers maybe
                window.addEventListener("message", function() {

                    var t2 = new Date();

                    // Could throttle to 100ms or whatever
                    if (t2 - t1 > POLL_DELAY) {

                        t1 = t2;
                        i++;

                        console.log(t2.getTime() + " , " + i);

                        box.setY(Y.one("body").get("scrollTop"));
                    }

                    window.postMessage("interrupt", "*");

                }, false);

                window.postMessage("interrupt", "*");
            });
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.box {
	width:100px;
	height:100px;
	background-color:red;
	position:absolute;
	top:0px;

	/*
	ISSUE ONE: Required to get it to repaint. Need to put it in a separate composite
	layer from the document (which it doesn't repaint, until the end of scroll).

	Downside - may have GPU memory mgmt impact.
	*/
	-webkit-transform: translateZ(0);
	}

	body {
	height: 10000px;
	}

	</style>
	<script type='text/javascript' src='http://yui.yahooapis.com/3.7.3/yui/yui.js'></script>
	</head>
	<body>
	<div class="box"></div>
	<script>
	YUI().use("node", function(Y) {

	var box = Y.Node.one(".box"),
	t1 = new Date(),
	POLL_DELAY = 0,
	i = 0;

	// ISSUE TWO:
	// requestAnimationFrame? touchMove? Anything
	// which messes with the event loop as opposed
	// to setTimeout/setInterval or scroll, which are
	// "paused" until scroll completes.

	// We could also try a setTimeout inside the postMessage
	// to avoid constantly re-trying postMessage. Maybe they let
	// setTimeouts inside a postMessage through? Or webworkers maybe
	window.addEventListener("message", function() {

	var t2 = new Date();

	// Could throttle to 100ms or whatever
	if (t2 - t1 > POLL_DELAY) {

	t1 = t2;
	i++;

	console.log(t2.getTime() + " , " + i);

	box.setY(Y.one("body").get("scrollTop"));
	}

	window.postMessage("interrupt", "*");

	}, false);

	window.postMessage("interrupt", "*");
	});
	</script>
	</body>
	</html>