transform, zoom, scale 후 흐릿한 현상 해결

에러 내용

---

blurry after transform, zoom, scale

css로 transform 또는 zoom, scale을 적용한 후 이미지 또는 텍스트 등이 흐릿해지는 현상이다.

에러 원인

---

흐릿한 이미지의 경우, scaling 과정이 실제로 원본 이미지를 흐릿하게 변경하기 때문이다.

흐릿한 텍스트의 경우, transform 과정에서 텍스트의 backface가 의도하지 않은 형태로 보이게 되어 frontface와 겹쳐지면서 흐릿하게 보인다.

 

해결 방법

---

 

1-1. css의 경우 다음 세 가지 선언을 차례로 적용시켜본다.

backface-visibility: hidden;

transform: translateZ(0);

-webkit-font-smoothing: subpixel-antialiased;

1-2. react라면 다음과 같이 시도해본다.

<Box
        style={{
          "backface-visibility": "hidden",
          "transform": "translateZ(0)",
          "-webkit-font-smoothing": "subpixel-antialiased"
        }}
>
</Box>

 

2. 이미지의 경우 다음의 선언들을 시도해본다. (이미지의 경우는 확인해보지 않았다.)

img {
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

img {
  image-rendering: pixelated;
}

img {
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering:   -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

 

3. 또는 width와 height를 직접 지정한다.

 

결과

---

not blurry text

 

참고 자료

---

 

 

Blurry text after using CSS transform: scale(); in Chrome

CSS Code to Fix blurry image when scaling down - Tutorials Class