[CSS] 크롬(chrome) 이미지 흐릴 때

크롬은 이미지 랜더링 문제가 있습니다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 괜찮지만 원본 해상도보다 확대, 축소 되는 경우에는 이미지가 흐려집니다.

📝 image-rendering

• image-rendering이란 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 크기가 변경된 이미지에 적용됩니다.

📜 -webkit-optimize-contrast

• 이미지 랜더링 방식을 변경해줍니다.
• 크롬, 사파리 등의 브라우저에서 대비를 최적화하여 흐려지는 문제를 어느정도 해결해줍니다.
  제가 사용해 봤을 때 이 방식이 제일 효과 있었습니다.

📝 transform

📜 translateZ

• transform: translateZ(0)을 이용하여 깊이감을 없애줍니다.
• 약간의 효과는 있었지만 image-rendering 방식보다는 흐린점이 약간 보였습니다.

📝 backface-visibility

• backface-visibility란 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.

📜 hidden

• backface-visibility: hidden을 이용하여 transform: translateZ(0)와 비슷하게
  뒷면을 보이지 않게해서 입체감을 없애줍니다.