title: CSS Hardware Acceleration in Phonegap App
body: <p>I'm trying to use hardware acceleration in a phonegap application. I have read that I have to put a css 3dtransform for this pourpose. So, I have used a webkit-transform3d in the main class of my html element, but I continue to see some lag during the animation.</p>
  
  <p>I want to open and close a box, settings is height from 0 to somevalue and viceversa. </p>
  
  <p>I have write an example here: <a href="http://jsfiddle.net/VG7V5/6/" rel="nofollow">http://jsfiddle.net/VG7V5/6/</a> </p>
  
  <p>As you can see, I have defined the class container in this way:</p>
  
  <pre><code>#container {
      box-shadow: 0.1em 0.1em 0.2em 0em #777777;
      width: 100%;
      max-height: 15em;
      overflow-y: auto;
      transform: translate3d(0em,0em,0em);
      -webkit-transform:translate3d(0em,0em,0em);
      -webkit-perspective: 1000;
      -webkit-backface-visibility: hidden;
  }
  </code></pre>
  
  <p>If I open the example with my Nexus 5 with Android 4.4.2 I see some lags during the animation, with or without the transform3d enabled (infact in jsfiddle it starts with the transform commented). It seems as nothing change. </p>
  
  <p>Is there something wrong???</p>
  
  <p>Thx</p>