Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Noko Time Tracking and Every Time Zone and write books like
   Want me to speak at your conference? Contact me!

Visualizing WebKit’s hardware acceleration

February 8th, 2011

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/

..and all hardware-accelerated layers will show up in red. Try 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

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