| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <!-- saved from url=(0048)http://fiddle.jshell.net/bt8dhkrn/24/show/light/ --> | |
| 3 <!-- here we have three divs that jitter together and the size of fixed-parent | |
| 4 div is bigger than in other test cases --> | |
| 5 | |
| 6 <style> | |
| 7 #jitter-big-parent { | |
| 8 width: 500px; | |
| 9 height: 500px; | |
| 10 background: papayawhip; | |
| 11 border: 1px solid black; | |
| 12 will-change: transform; | |
| 13 } | |
| 14 | |
| 15 #jitter-child { | |
| 16 width: 250px; | |
| 17 height: 250px; | |
| 18 background: green; | |
| 19 border: 1px solid black; | |
| 20 will-change: transform; | |
| 21 } | |
| 22 | |
| 23 #jitter-grand-child { | |
| 24 width: 100px; | |
| 25 height: 100px; | |
| 26 background: blue; | |
| 27 border: 1px solid black; | |
| 28 will-change: transform; | |
| 29 } | |
| 30 | |
| 31 #scrolled1 { | |
| 32 width: 500px; | |
| 33 height: 500px; | |
| 34 background: red; | |
| 35 border: 1px solid black; | |
| 36 will-change: transform; | |
| 37 } | |
| 38 | |
| 39 #scrolled2 { | |
| 40 width: 500px; | |
| 41 height: 500px; | |
| 42 background: green; | |
| 43 border: 1px solid black; | |
| 44 will-change: transform; | |
| 45 } | |
| 46 | |
| 47 body { | |
| 48 height: 2500px; | |
| 49 } | |
| 50 </style> | |
| 51 | |
| 52 <script> | |
| 53 window.onload=function(){ | |
| 54 tick = function(timestamp) { | |
| 55 document.getElementById("jitter-big-parent").style.transform = "translate(0p
x, " + document.body.scrollTop + "px)"; | |
| 56 window.requestAnimationFrame(tick); | |
| 57 } | |
| 58 window.requestAnimationFrame(tick); | |
| 59 | |
| 60 jank = function(timestamp) { | |
| 61 for (var i = 0; i < 10; ++i) { | |
| 62 Date.now(); | |
| 63 } | |
| 64 window.setTimeout(jank, 50); | |
| 65 } | |
| 66 window.setTimeout(jank, 50); | |
| 67 } | |
| 68 </script> | |
| 69 | |
| 70 <div id="jitter-big-parent" style="transform: translate(0px, 0px);"> | |
| 71 <div id="jitter-child"> | |
| 72 <div id="jitter-grand-child"></div> | |
| 73 </div> | |
| 74 </div> | |
| 75 <div id="scrolled1"></div> | |
| 76 <div id="scrolled2"></div> | |
| 77 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2873453005:
Remove jitter page set (Closed)
