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 |