title: Check when css transforms are executed using hardware acceleration
body: <p>I have been working for a long time on one particular problem to make an svg image that can be dragged and zoomed using gestures on a mobile. </p>
  
  <p>I use hammer.js to detect gestures and my current implementation works as follows. </p>
  
  <p>When a drag is detected the SVG element is transformed using a (-webkit-)transform with a matrix3d value. Upon completion of the gesture the new viewbox is calculated and the transform is returned to the identity matrix.</p>
  
  <p>When a pinch is detected SVG element is zoomed using a (-webkit-)transform with a matrix3d value. Upon completion of the gesture the new viewbox is calculated and the transform is returned to the identity matrix.</p>
  
  <p>To further improve performance the attribute changes are applied inside request animation frame calls.</p>
  
  <p>What this means is that when zooming in the image will raster during the zoom and then there  will be a small delay and it will be re-rendered clearly when the viewbox calculations complete. </p>
  
  <p>The whole purpose of this involved process is so that the transformation/zooming during the gesture can be done using the GPU and have a smooth user experience.</p>
  
  <p><strong>What I want to be able to do is check if a particular transformation was pushed to the gpu or not?</strong></p>
  
  <p>For example <a href="http://londonlayout.divshot.io/" rel="nofollow">this page</a> runs the code I described above. On most desktop browsers it works fine but that is because the desktop performance means that there is no noticeable lag even if the image is re-rendered constantly. </p>
  
  <p>The interesting behaviour happens on mobile. When I use this page in browser on my android phone the dragging and zooming is smooth. When I open the same page on the same phone but in chrome the animation is much less smooth. The image rasters on both when zooming in and so what I want to be able to do is check if chrome is using the hardware for that transformation. I want to use the hardware across as many browsers as possible but this question is about checking whether I was successful in doing that.  </p>