[CSS] transform: translate(-50%, -50%) 사용시 이미지 깨짐,폰트 흐릿해짐 현상

position: absolute 속성과 값을 이용하여 요소를 정가운데 오도록 할때 반드시 같이 써야하는 속성으로

transform: translate(-50%, -50%)을 소개한 적이 있다.

 

위의 값을 적용하려는게 이미지,폰트일때 웹킷(크롬,웨일 등)계열 브라우저에서 이미지나 텍스트가 깨지거나 흐려지는 이슈사항이 있다는 것을 확인했다.

 

그럴때 아래와 같이 처리해준다.

 

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px));
}

 

transform: translate(-50%, -50%) 이 아닌 calc() 함수를 쓰는 것이다.

transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px))

 

* 다만 깨지는 요소가 높이(height)값이 잡혀있을 경우 홀수로 지정을 해줘야한다.

 

추가로,

calc() 함수가 적용되지 않는 IE같은 브라우저까지 감안해야하는 경우 아래와 같이 처리해준다.

 

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px));
}

기존 transform: translate(-50%, -50%)은 그대로 사용하되

벤더프리픽스 '-webkit-' 을 사용하여 웹킷 브라우저계열에만 해당 부분이 적용될 수 있도록 한다.

 

*근데 transform: translate(-50%,-50%)을 적용했을때 깨지는 요소에 width,height 값이 홀수로 들어가있으면 안깨진다.

정확한 것을 알 수 없는 이슈사항.