CSS3 translate lead to fuzzy fonts

Today, customer feedback, found that the use of the font can cause blurred translate.

.media-body-box{
      @media all and (min-width: 992px){
        position: absolute;
        width: 100%;
        // height: 
        top:50%;
        transform: translateY(-50%);
        right: 0;
        padding: 30px;
      }
    }

For vertically centered, using transform: translateY (-50%) and top: 50%, then there has been the problem of fuzzy fonts.

Now solution is as follows:

1. Some say the Internet translate in the parameters are not fixed percentage value, but no way ah, I will use the next!

2. Some say the Internet will set the width and height even, ah, the next test, to see element.style I added the even width and height, test yourself slowly, so that the right of the decimal point 490x290 does not appear like it!

 

 The perfect solution!