title: Text blurry after super simple CSS3 Transform animation
body: <p>As simple as it is, I can't get this animation to work properly. </p>
  
  <p>What I am animating on hovering a div is:</p>
  
  <ul>
  <li>transform3d(0, Xem, 0)</li>
  <li>border</li>
  <li>height</li>
  </ul>
  
  <p>so, nothing special. But when I open this in Chrome, I'm getting a really poorly performing hover animation.</p>
  
  <p>And the worst thing is that <strong>the transform 3d makes my text blurry.</strong> WHY? There is no zoom or any 3D effect.</p>
  
  <p>Have a look in your browser: <a href="http://markmaurer.de/test/" rel="nofollow noreferrer">Click</a></p>
  
  <p>Am I missing something? This seems like a quite simple animation.</p>
  
  <p><strong>div before hover</strong></p>
  
  <p><img src="https://i.stack.imgur.com/AioT8.png" alt="div before hover"></p>
  
  <p><strong>div hovered (blurry text)</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Jls8A.png" alt="enter image description here"></p>
  
  <p><strong>The CSS Code (SASS) is basically:</strong></p>
  
  <pre><code>.disciplines-wrapper &gt; div {
  color: white;
  padding: 0;
  width: 33%;
  margin-right: .5%;
  margin-top: 320px;
  height: 12em;
  height: 8.375em;
  cursor: pointer;
  position: relative;
  
  
  .wrap {
      height: 8.375em;
      position: absolute;
      transition: transform 0.2s ease-out, height 0.2s ease-out, border 0.2s ease-out;
      border: 1px solid white;
      overflow: hidden;
      backface-visibility: hidden;
  
  
      &amp;:hover {
          transform: translate3d(0, -3.475em, 0);
          height: 11.875em;
          border: 1px solid $lightblue;
          background: $lightblue;
  
      }
  }
  }
  </code></pre>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;div class="disciplines-wrapper"&gt;
  
              &lt;div class="col-1-3"&gt;
  
                      &lt;div class="wrap"&gt;
                          &lt;div class="disciplines-text-wrapper"&gt;
                              &lt;h1&gt;
                                  Kreation
                              &lt;/h1&gt;
                              &lt;p&gt;Effektive Werbung entsteht durch das optimale Zusammenspiel aller Kreativen. &lt;/p&gt;
                          &lt;/div&gt;
                          &lt;a href="#"&gt;&lt;i class="icon-right-circled"&gt;&lt;/i&gt;Weitere Informationen&lt;/a&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="col-1-3"&gt;
                      &lt;div class="wrap"&gt;
                          &lt;div class="disciplines-text-wrapper"&gt;
                              &lt;h1&gt;
                                  Druck
                              &lt;/h1&gt;
                              &lt;p&gt;Kernkompetenz von Prinovis ist der Druck. Schnell, hochwertig und flexibel.&lt;/p&gt;
  
                          &lt;/div&gt;
                          &lt;a href="#"&gt;&lt;i class="icon-right-circled"&gt;&lt;/i&gt;Weitere Informationen&lt;/a&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-1-3"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="disciplines-text-wrapper"&gt;
                          &lt;h1&gt;
                              Weiterverarbeitung
                          &lt;/h1&gt;
                          &lt;p&gt;Nach dem Druck ist vor der Verarbeitung: Sammelheftung oder Klebebindung&lt;/p&gt;
  
                      &lt;/div&gt;
                      &lt;a href="#"&gt;&lt;i class="icon-right-circled"&gt;&lt;/i&gt;Weitere Informationen&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;  
  </code></pre>