| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <!-- saved from url=(0048)http://fiddle.jshell.net/bt8dhkrn/26/show/light/ --> | |
| 3 <!-- here we have two divs that jitter --> | |
| 4 | |
| 5 <style type="text/css"> | |
| 6 #jitter1 { | |
| 7 width: 100px; | |
| 8 height: 100px; | |
| 9 background: papayawhip; | |
| 10 border: 1px solid black; | |
| 11 will-change: transform; | |
| 12 } | |
| 13 | |
| 14 #jitter2 { | |
| 15 width: 100px; | |
| 16 height: 100px; | |
| 17 background: red; | |
| 18 border: 1px solid black; | |
| 19 will-change: transform; | |
| 20 } | |
| 21 | |
| 22 body { | |
| 23 height: 2500px; | |
| 24 } | |
| 25 </style> | |
| 26 | |
| 27 <script> | |
| 28 window.onload=function(){ | |
| 29 tick = function(timestamp) { | |
| 30 document.getElementById("jitter1").style.transform = "translate(0px, " + doc
ument.body.scrollTop + "px)"; | |
| 31 document.getElementById("jitter2").style.transform = "translate(0px, " + doc
ument.body.scrollTop + "px)"; | |
| 32 window.requestAnimationFrame(tick); | |
| 33 } | |
| 34 window.requestAnimationFrame(tick); | |
| 35 | |
| 36 jank = function(timestamp) { | |
| 37 for (var i = 0; i < 10; ++i) { | |
| 38 Date.now(); | |
| 39 } | |
| 40 window.setTimeout(jank, 50); | |
| 41 } | |
| 42 window.setTimeout(jank, 50); | |
| 43 } | |
| 44 </script> | |
| 45 | |
| 46 <div id="jitter1" style="transform: translate(0px, 318px);"></div> | |
| 47 <div id="jitter2" style="transform: translate(0px, 318px);"></div> | |
| 48 </html> | |
| OLD | NEW |