| <html> | |
| <head> | |
| <style> | |
| #layer { | |
| will-change:transform; | |
| opacity: 0.75; | |
| background-color: rgb(0, 100, 0); | |
| } | |
| #child { | |
| will-change:transform; | |
| } | |
| #base { | |
| background-color: rgb(200, 0, 0); | |
| } | |
| .fullpage { | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="base" class="fullpage"></div> | |
| <div id="layer" class="fullpage"> | |
| <!-- layer needs to have a child with content --> | |
| <div id="child"><canvas width="1px" height="1px"></canvas></div> | |
| </div> | |
| </body> | |
| </html> |