title: CSS3 transform scale of div results in jumping child elements in Firefox
body: <p>I am trying to scale an element in CSS3. This element has child elements which jump around when the animation is done. This seems to occur only in Firefox. I've been trying a lot of fixes found here on SO, but none of them seem to do the job.</p>
  
  <p>My HTML setup:</p>
  
  <pre><code>&lt;div&gt;
  &lt;ul&gt;
    &lt;li class="appcenter-menu-item focus"&gt;
      &lt;a href="#/sp"&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
          &lt;label&gt;First item&lt;/label&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="appcenter-menu-item focus"&gt;
      &lt;a href="#/pep"&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;label&gt;Second item&lt;/label&gt;
      &lt;/a&gt;
    &lt;/li&gt;
      &lt;li class="appcenter-menu-item focus"&gt;
        &lt;a href="#/hp"&gt;
          &lt;div class="icon"&gt;&lt;/div&gt;
          &lt;label&gt;Third Item&lt;/label&gt;
        &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The transition on hover:</p>
  
  <pre><code>.focus {
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
  }
  .focus:hover {
      -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      -o-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      transform: scale(1.1);
  }
  </code></pre>
  
  <p>I have created a jsfiddle which shows the complete setup:</p>
  
  <p><a href="http://jsfiddle.net/kwhq2z4t/3/" rel="noreferrer">http://jsfiddle.net/kwhq2z4t/3/</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>I am Using FireFox version 32.0.1, on Windows 7 x64.</p>