translateY(-50%) blurring child elements

Question

For some reason my vertical alignment code is blurring some but not all child elements in Chrome and Safari.

Whats causing it is the translateY(-50%), if I remove this then blurriness is gone however the vertical centring effect is lost.

/* @group Center all the things */
.center-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.center-wrapper .center {
    position: relative;
    overflow: hidden;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /* This fixes the blurred buttons but breaks centering

       -webkit-backface-visibility: hidden;
               backface-visibility: hidden;

       transform: translateZ(0);*/
}
/* @end */

Tried and tested methods such as below work but they break the vertical centring:

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
transform: translateZ(0);

Answer 1

The only way around this blurry issue, from what I could see was to change the vertical alignment method and use display: table instead. Here's how I did it:

1) Keep HTML markup the same

<div class="center-wrapper">
   <div class="center">
       <p>Centered content here</p>
   </div>
</div>

2) Change CSS to the following:

/* @group Center all the things */

.center-wrapper {
    min-height: 100%;
    padding: 0;
    display: table;
    width: 100%;
}

    .center-wrapper .center {
        display: table-cell;
        vertical-align: middle;

    }

 /* @end */