Fast Graphics Performance With HTML

  • Make content that has scrolling content underneath it opaque

    • e.g. use 
      <div><div style="background:white; position:fixed">Simple</div>lots of text...</div>
      instead of 
      <div><div style="position:fixed">Simple</div>lots of text...</div>

  • Make the content of scrollable sub frames opaque

    • e.g. use 
      <div style="overflow:scroll><div style="background:white"><p>This is some text</p><p>And some more</p></div></div>
      instead of 
      <div style="overflow:scroll><p>This is some text</p><p>And some more</p></div>

  • Animating 'transform' and 'opacity' properties can be done with the compositor which makes them efficient to animate