css translate3d 글자 흐림 및 뿌옇게 보이는 현상

브라우저의 GPU 가속을 사용하는 translate3d 속성이 있다.

animation이라던지 가속을 위해 0,0,0을 넘겨주는 식으로해서 사용하면 유용한 속성이다.

-webkit-transform : translate3d
-webkit-transform : translateZ
-webkit-transform : rotate3d
-webkit-transform : scale3d
-webkit-transform-style : preserved-3d

webkit/blink 엔진 기반의 데스크탑(Mac/Windows) 브라우저에서 translate3d속성으로 센터정렬 사용 시,

글씨가 흐리고 뿌옇게 보이는 현상이 생겼다.

.image-square > .content {
    padding: 0 10%;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
}

위 css가 적용된 사이트에서 흐림현상이 발생했는데.. 아래 사진과 같다.

찝찝하지만, 소숫점을 어느정도 붙여주면 흐림이 사라진다.

.image-square > .content {
    padding: 0 10%;
    top: 50%;
    transform: translate3d(0, -50.4%, 0);
    -webkit-transform: translate3d(0, -50.4%, 0);
    -moz-transform: translate3d(0, -50.4%, 0);
}

미세하게나마, 흐린현상이 있지만 이조차도 없애려면, 그냥 margin을 음수값 주는게 나을듯 하다..