title: Test if Hardware Acceleration has been enabled for a CSS animation?
body: <p>How can I tell <em>(for testing purposes)</em> if Hardware Acceleration has been enabled for a CSS animation?</p>
  
  <p>I have the following code which essentially enlarges an element and makes it fullscreen (without using the HTML5 fullscreen API). It runs like a stuttering asthmatic tortoise on most mobiles when using a jQuery animation so I have used CSS3 instead.</p>
  
  <p>Here is the jsFiddle example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#makeFullscreen").on("click", function() {        
     
      var map = $("#map"),
          mapTop = map.offset().top,
          mapLeft = map.offset().left;
      
      $("#map").css({
          "position": "fixed",
          "top": mapTop,
          "left": mapLeft,
          "width": map.outerWidth(true),
          "height": map.outerHeight(true)
      });
      
      setTimeout(function(){map.addClass("fullscreen")},1);
      
      return false;        
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mapContainer {    
      width: 150px;
      height: 200px;
      position: relative;
      margin: 0 auto;
  }
  
  .map {  
      background: #00f;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      text-align: center;
  }
  .fullscreen {
      -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
      -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
      -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
      -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
      transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
      
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      
      top: 0 !important;
      left: 0 !important;
   width: 100% !important;
   height: 100% !important;
  }
  
  #makeFullscreen {
      margin-top: 20px;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="mapContainer"&gt;
      &lt;div id="map" class="map"&gt;
          &lt;button id="makeFullscreen"&gt;Make Fullscreen&lt;/button&gt; 
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This adds a class and the element transitions from one state to the next using a CSS transition. This is faster than jQuery but is still stuttery on iOS and android.</p>
  
  <p>But I read <a href="http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css" rel="noreferrer">here</a> that you can force the transition to be accelerated using the GPU by specifying a 3d transform that essentially does nothing, like this:</p>
  
  <pre><code>   -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  </code></pre>
  
  <p>However, after adding that to my CSS I see no visual improvement.</p>
  
  <h2>The Question Then...</h2>
  
  <p>Is there a way to see if hardware acceleration has been enabled through dev tools in any browser? I don't need to detect this with script, I just want to know for testing purposes.</p>