Text blurry after super simple CSS3 Transform animation - html

Question

As simple as it is, I can't get this animation to work properly.
What I am animating on hovering a div is:
transform3d(0, Xem, 0)
border
height
so, nothing special. But when I open this in Chrome, I'm getting a really poorly performing hover animation.
And the worst thing is that the transform 3d makes my text blurry. WHY? There is no zoom or any 3D effect.
Have a look in your browser: Click
Am I missing something? This seems like a quite simple animation.
div before hover
div hovered (blurry text)
The CSS Code (SASS) is basically:
.disciplines-wrapper > 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;
&:hover {
transform: translate3d(0, -3.475em, 0);
height: 11.875em;
border: 1px solid $lightblue;
background: $lightblue;
}
}
}
The HTML
<div class="disciplines-wrapper">
<div class="col-1-3">
<div class="wrap">
<div class="disciplines-text-wrapper">
<h1>
Kreation
</h1>
<p>Effektive Werbung entsteht durch das optimale Zusammenspiel aller Kreativen. </p>
</div>
<i class="icon-right-circled"></i>Weitere Informationen
</div>
</div>
<div class="col-1-3">
<div class="wrap">
<div class="disciplines-text-wrapper">
<h1>
Druck
</h1>
<p>Kernkompetenz von Prinovis ist der Druck. Schnell, hochwertig und flexibel.</p>
</div>
<i class="icon-right-circled"></i>Weitere Informationen
</div>
</div>
<div class="col-1-3">
<div class="wrap">
<div class="disciplines-text-wrapper">
<h1>
Weiterverarbeitung
</h1>
<p>Nach dem Druck ist vor der Verarbeitung: Sammelheftung oder Klebebindung</p>
</div>
<i class="icon-right-circled"></i>Weitere Informationen
</div>
</div>
</div>