OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #willChangeTop { | 5 #willChangeTop { |
6 position: absolute; | 6 position: absolute; |
7 left: 200px; | 7 left: 200px; |
8 top: 100px; | 8 top: 100px; |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
11 background-color: blue; | 11 background-color: blue; |
12 color: white; | 12 color: white; |
13 } | 13 } |
14 | 14 |
15 #willChangeTransform { | 15 #willChangeTransform { |
16 -webkit-transform: translateZ(0); | 16 transform: translateZ(0); |
17 position: absolute; | 17 position: absolute; |
18 left: 200px; | 18 left: 200px; |
19 top: 300px; | 19 top: 300px; |
20 width: 100px; | 20 width: 100px; |
21 height: 100px; | 21 height: 100px; |
22 background-color: blue; | 22 background-color: blue; |
23 color: white; | 23 color: white; |
24 } | 24 } |
25 | 25 |
26 .fixed { | 26 .fixed { |
(...skipping 15 matching lines...) Expand all Loading... |
42 will-change: top | 42 will-change: top |
43 <div class="fixed"></div> | 43 <div class="fixed"></div> |
44 </div> | 44 </div> |
45 <div id="willChangeTransform"> | 45 <div id="willChangeTransform"> |
46 will-change: -webkit-transform | 46 will-change: -webkit-transform |
47 <div class="fixed"></div> | 47 <div class="fixed"></div> |
48 </div> | 48 </div> |
49 </body> | 49 </body> |
50 | 50 |
51 </html> | 51 </html> |
OLD | NEW |