| <!DOCTYPE HTML> |
| <head> |
| <style> |
| body { |
| overflow: hidden; |
| margin: 0; |
| } |
| |
| .svgcanvas { |
| position: relative; |
| width: 3800px; |
| height: 600px; |
| display: inline-block; |
| overflow: hidden; |
| } |
| |
| .indicator { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 3800px; /* Trigger composited tiling */ |
| height: 600px; |
| display: inline-block; |
| background-color: red; |
| } |
| |
| .composited { |
| -webkit-transform: translateZ(0); |
| } |
| |
| #svgroot { |
| position: absolute; |
| top: 0; |
| left: 0; |
| background-color: gray; |
| } |
| |
| svg { |
| border: 4px solid black; |
| box-sizing: border-box; |
| } |
| </style> |
| </head> |
| <!-- You should see no red --> |
| <div class="indicator"></div> |
| <div class="composited svgcanvas"> |
| <svg id="svgroot" width="1920" height="1400" overflow="visible"> |
| <svg id="canvasBackground" x="540" y="480" width="640" height="480" overflow="none"> |
| <rect width="100%" height="100%" fill="green"/> |
| </svg> |
| </svg> |
| </div> |
| </div> |
