| <!DOCTYPE html> |
| <!-- saved from url=(0048)http://fiddle.jshell.net/bt8dhkrn/29/show/light/ --> |
| <!-- here we have a single div that jitters --> |
| |
| <style> |
| #jitter { |
| width: 100px; |
| height: 100px; |
| background: papayawhip; |
| border: 1px solid black; |
| will-change: transform; |
| } |
| |
| body { |
| height: 2500px; |
| } |
| </style> |
| |
| <script> |
| window.onload=function(){ |
| tick = function(timestamp) { |
| document.getElementById("jitter").style.transform = "translate(0px, " + document.body.scrollTop + "px)"; |
| window.requestAnimationFrame(tick); |
| } |
| window.requestAnimationFrame(tick); |
| |
| jank = function(timestamp) { |
| for (var i = 0; i < 10; ++i) { |
| Date.now(); |
| } |
| window.setTimeout(jank, 50); |
| } |
| window.setTimeout(jank, 50); |
| } |
| </script> |
| |
| <div id="jitter" style="transform: translate(0px, 0px);"></div> |
| </html> |
