OLD | NEW |
---|---|
(Empty) | |
1 <style> | |
2 body { | |
3 margin: 0; | |
4 } | |
5 | |
6 .scroller { | |
7 will-change: transform; | |
8 | |
9 overflow: hidden; /* hide scrollbars */ | |
10 width: 200px; | |
11 height: 500px; | |
12 outline: 2px solid black; | |
13 } | |
14 | |
15 .container { | |
16 width: 200px; | |
17 height: 1000px; | |
18 } | |
19 | |
20 .sticky { | |
21 will-change: transform; | |
flackr
2017/03/09 20:25:20
I don't think you have a test of mixed composited
smcgruer
2017/03/14 22:04:06
Tried, but everything appears to be getting compos
| |
22 | |
23 position: sticky; | |
24 width: 200px; | |
25 top: 0; | |
26 } | |
27 | |
28 .first { | |
29 height: 500px; | |
30 background: red; | |
31 } | |
32 | |
33 .second { | |
34 height: 400px; | |
35 background: green; | |
36 } | |
37 | |
38 .third { | |
39 height: 300px; | |
40 background: blue; | |
41 top: 100px; | |
42 } | |
43 | |
44 .fourth { | |
45 height: 200px; | |
46 background: pink; | |
47 top: 100px; | |
48 } | |
49 | |
50 .fifth { | |
51 height: 100px; | |
52 background: yellow; | |
53 } | |
54 </style> | |
55 | |
56 <script> | |
57 if (window.testRunner) | |
58 testRunner.waitUntilDone(); | |
59 | |
60 function finishTest() { | |
61 document.querySelector('.scroller').scrollTop = 400; | |
62 if (window.testRunner) | |
63 testRunner.notifyDone(); | |
64 } | |
65 | |
66 window.addEventListener('load', function() { | |
67 requestAnimationFrame(function() { | |
68 requestAnimationFrame(finishTest); | |
69 }); | |
70 }); | |
71 </script> | |
72 | |
73 <div class="scroller"> | |
74 <div class="container"> | |
75 <div class="first sticky"> | |
76 <div class="second sticky"> | |
77 <div class="third sticky"> | |
78 <div class="fourth sticky"> | |
79 <div class="fifth sticky"></div> | |
80 </div> | |
81 </div> | |
82 </div> | |
83 </div> | |
84 </div> | |
85 </div> | |
OLD | NEW |