Visualizing WebKit’s hardware acceleration

Want to know which parts of your web page are hardware accelerated on Safari or Mobile Safari? It’s easy to find out.

Just start Safari with…


$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari


..and all hardware-accelerated layers will show up in red. Try apple.com or Every Time Zone or Freelancember.

Same goes for Mobile Safari, in the iOS Simulator:


$ CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator


Try surfing over to HTML5 Mobile Pro, and see the Core Animation layers in all their red-tinted glory.

You can mess around even more with the various Core Animation debugging flags. For example, if you specify CA_PRINT_TREE=1 you’ll get complete dumps of the rendering tree that Core Animation uses to composite the image, and CA_COLOR_FLUSH=1 will show you when hard-accelerated parts of your page are updated/redrawn.

(Hat tip to @thijs for this handy tip!)