| OLD | NEW | 
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> | 
| 2 <html> | 2 <html> | 
| 3 <head> | 3 <head> | 
| 4   <meta name=viewport content="width=device-width"> | 4   <meta name=viewport content="width=device-width"> | 
| 5   <style> | 5   <style> | 
| 6     .scrollable { | 6     .scrollable { | 
| 7       height: 200px; | 7       height: 200px; | 
| 8       width: 100px; | 8       width: 100px; | 
| 9       overflow: scroll; | 9       overflow: scroll; | 
| 10       -webkit-overflow-scrolling: touch; | 10       -webkit-overflow-scrolling: touch; | 
| 11     } | 11     } | 
| 12     .container { | 12     .container { | 
| 13       height: 100px; | 13       height: 100px; | 
| 14       overflow: hidden; | 14       overflow: hidden; | 
| 15       position: relative; | 15       position: relative; | 
| 16       background-color: green; | 16       background-color: green; | 
| 17     } | 17     } | 
| 18     .indicator { | 18     .indicator { | 
| 19       margin-top: 100px; | 19       margin-top: 100px; | 
| 20       height: 100px; | 20       height: 100px; | 
| 21       background-color: red; | 21       background-color: red; | 
| 22     } | 22     } | 
| 23   </style> | 23   </style> | 
|  | 24   <script> | 
|  | 25     if (window.internals) | 
|  | 26       window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
    d(true); | 
|  | 27   </script> | 
| 24 </head> | 28 </head> | 
| 25 | 29 | 
| 26 <body> | 30 <body> | 
| 27   <!-- Should see a green square (no red). --> | 31   <!-- Should see a green square (no red). --> | 
| 28   <div class="scrollable"> | 32   <div class="scrollable"> | 
| 29     <div class="container"> | 33     <div class="container"> | 
| 30       <div class="indicator"></div> | 34       <div class="indicator"></div> | 
| 31     </div> | 35     </div> | 
| 32   </div> | 36   </div> | 
| 33 </body> | 37 </body> | 
| 34 | 38 | 
| 35 </html> | 39 </html> | 
| OLD | NEW | 
|---|