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
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!)Tweet