| <!DOCTYPE html> |
| <!-- saved from url=(0048)http://fiddle.jshell.net/bt8dhkrn/26/show/light/ --> |
| <!-- here we have two divs that jitter --> |
| |
| <style type="text/css"> |
| #jitter1 { |
| width: 100px; |
| height: 100px; |
| background: papayawhip; |
| border: 1px solid black; |
| will-change: transform; |
| } |
| |
| #jitter2 { |
| width: 100px; |
| height: 100px; |
| background: red; |
| border: 1px solid black; |
| will-change: transform; |
| } |
| |
| body { |
| height: 2500px; |
| } |
| </style> |
| |
| <script> |
| window.onload=function(){ |
| tick = function(timestamp) { |
| document.getElementById("jitter1").style.transform = "translate(0px, " + document.body.scrollTop + "px)"; |
| document.getElementById("jitter2").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="jitter1" style="transform: translate(0px, 318px);"></div> |
| <div id="jitter2" style="transform: translate(0px, 318px);"></div> |
| </html> |
