April 15, 2011 0

Visualizing WebKits hardware acceleration


If you’ve ever experimented with CSS3 animations/transformations in WebKit you’ve probably also wondered if its possible to visually see which elements are being hardware accelerated.

This is easy to do, just start Safari with the following command from the Terminal:

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

All elements that are being hardware accelerated will now have an opaque red overlay. You can also do this with the iOS Simulator:

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

Thanks to Thomas Fuchs for originally posting this!