Skip to content

Instantly share code, notes, and snippets.

@michaschwab

michaschwab/index.html

Last active September 25, 2020 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michaschwab/e4822a817a8fc32ddb28f9663c432f16 to your computer and use it in GitHub Desktop.
Save michaschwab/e4822a817a8fc32ddb28f9663c432f16 to your computer and use it in GitHub Desktop.
Download ZIP
Composit Layer Enforcing for HTML vs SVG
Raw
index.html
<svg height="220">
<g id="first" style="will-change:transform"><rect width=100 height="100" fill=red></rect></g>
<g style="will-change:transform"><rect y=100 width=100 height="100" fill=blue></rect></g>
</svg>
<div style="width:100px; height: 100px; background: #f00; will-change: transform"></div>
<div style="width:100px; height: 100px; background: #00f; will-change: transform"></div>
<p>This website contains an SVG with two group elements with a rect element within each, and two div elements.
It tries to force compositing layers for the two SVG group elements and for the two div elements.
The current implementation of Chrome only supports layers on the div elements, but not on the SVG g elements, as seen in
the layer tab of the dev console (see
<a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#layers"
target="_blank">docs</a>).
Below is a side view of the layers, showing that the two div elements are on separate layers, while the two SVG g elements
are on the same layer as each other and as everything else.
</p>
<img src="layers-3d.png" width="222" height="288" />
<p>This shows that we can not enforce compositing layers for SVG elements. This means that we can not smoothly animate
many elements within SVG g elements, but we can smoothly animate many elements within div elements. Some
optimizations made for HTML are not available within SVGs.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment