transform + transition causes jump or blurry content CSS
<p>Let's start with the fiddle: <a href="http://jsfiddle.net/r1kw37g5/" rel="nofollow">http://jsfiddle.net/r1kw37g5/</a></p>

<pre><code>.grid-item .diamond .inner-diamond{
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 394px;
  height: 394px;
  position: relative;
  top: -23%;
  left: -23%;
}
</code></pre>

<p>The situation is I created a diamond shaped grid.
This grid has elements in it that are rotated -45 deg and a container inside that is rotated 45 deg to get the content straight again. (the content appears on hover)</p>

<p>Inside that container is a button with a simple animation, and here is where the problem starts. When you hover over the button the other content becomes blurry for a while until the animation ends and also makes a 1px jump to the right.</p>

<p>I tried: putting a translateZ(0) on the container to stop it from making a jump. That works but makes the content blurry constantly. I have tried to combat the blurry content with zoom and scale combination preserve3d and font-smoothing but so far no luck.</p>

<p>The question is does anybody know a way in which I can animate the button without it making a jump and without the other content becoming blurry?</p>