OLD | NEW |
---|---|
(Empty) | |
1 <style> | |
2 body { | |
3 margin: 0; | |
4 } | |
5 | |
6 .scroller { | |
7 /* TODO(smcgruer): Appears to be a paint bug if the scroller is composited. */ | |
flackr
2017/03/17 15:01:56
What is the bug? We shouldn't be trying to do stic
smcgruer
2017/03/17 17:36:52
Filed crbug.com/702637 and reverted this LayoutTes
| |
8 /* will-change: transform; */ | |
9 | |
10 overflow: auto; | |
11 width: 200px; | |
12 height: 350px; | |
13 outline: 2px solid black; | |
14 } | |
15 | |
16 .container { | |
17 width: 200px; | |
18 height: 700px; | |
19 } | |
20 | |
21 .outerSticky { | |
22 will-change: transform; | |
23 | |
24 display: inline; | |
25 position: sticky; | |
26 top: 0; | |
27 } | |
28 | |
29 .innerSticky { | |
30 will-change: transform; | |
31 | |
32 display: inline; | |
33 position: sticky; | |
34 top: 25px; | |
35 } | |
36 </style> | |
37 | |
38 <script> | |
39 if (window.testRunner) | |
40 testRunner.waitUntilDone(); | |
41 | |
42 function finishTest() { | |
43 document.querySelector('.scroller').scrollTop = 200; | |
44 if (window.testRunner) | |
45 testRunner.notifyDone(); | |
46 } | |
47 | |
48 window.addEventListener('load', function() { | |
49 requestAnimationFrame(function() { | |
50 requestAnimationFrame(finishTest); | |
51 }); | |
52 }); | |
53 </script> | |
54 | |
55 <div class="scroller"> | |
56 <div class="container"> | |
57 <div class="outerSticky">1<div class="innerSticky">2</div></div> | |
58 </div> | |
59 </div> | |
OLD | NEW |