[CSS] 크롬에서 이미지가 흐릴 때

 

(좌) 익스플로러11, (우) 크롬 90

크롬은 고질적인 이미지 랜더링 문제가 있다.

웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다.

이것은 크롬 뿐만 아니라 다른 브라우저에서도 일어나는 현상이지만 유독 크롬에서 심하게 나타난다.

이 문제를 해결하기 위해 오랜 시간 찾아봤지만 아주 마음에 드는 해결책은 찾을 수 없었고 적정선에서 타협할만한 수준은 몇 가지 알 수 있었다.

 

1. image-rendering

(좌) image-rendering 적용 전, (우) 적용 후

이미지 랜더링 방식을 바꾼다.

image-rendering: -webkit-optimize-contrast;

을 하게 되면 크롬, 사파리 등 브라우저에서 대비를 최적화하여 이미지 랜더링을 하는데 흐린 문제를 많이 해소해준다.

 

2. translateZ

(좌) translateZ 적용 전, (우) 적용 후

transform: translateZ(0);

z축을 0으로 적용하여 깊이감을 없앤다.

 

3. backface-visibility

(좌) backface-visibility 적용 전, (우) 적용 후

backface-visibility: hidden;

뒷면을 보이지 않게 함으로써 2번과 유사하게 입체감을 없앤다.