1<html> 2<head> 3<title>Compositing - Huge <div></title> 4</head> 5<body> 6<div id="big" style="-webkit-transform: translateZ(0);"> 7 <div style="left: 0px; top: 0px; width: 100px; height: 100px; position: absolute; background-color: green;"></div> 8 <div style="left: 3000000px; top: 1000000px; width: 100px; height: 100px; position: absolute; background-color: red;" id="bottomRight"></div> 9</div> 10<script> 11window.onload = init; 12 13var raf; 14 15function init() { 16 raf = window.requestAnimationFrame || 17 window.webkitRequestAnimationFrame || 18 window.mozRequestAnimationFrame || 19 window.oRequestAnimationFrame || 20 window.msRequestAnimationFrame; 21 tick(); 22}; 23 24function tick() { 25 update(); 26 raf(tick); 27}; 28var bottomRight = document.getElementById('bottomRight'); 29var x = 3000000; 30var y = 1000000; 31 32function rand255() { 33 return Math.floor(Math.random() * 256); 34} 35 36function update() { 37 y += 1000000; 38 bottomRight.style.left = x + 'px'; 39 bottomRight.style.top = y + 'px'; 40 bottomRight.style.backgroundColor = "rgb(" + rand255() + ", " + rand255() + ", " + rand255() + ")"; 41 scrollTo(x, y); 42}; 43 44</script> 45</body> 46</html> 47