CSS Transform Blurry Text

Question

The following CSS renders the font blurry in chrome How can I make my font unaffected?

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto !important;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%); <This line
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%); <-- This line
}

Answer 1

This can be due to a number of reasons, often rectified by anchoring the z plane with translateZ(0), to provide the item with its own composite layer - however a (combination of) the below may also procide results:

backface-visibility: hidden;
transform: translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);