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:
1 | $ 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:
1 | $ 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!
