FrontEnd/CSS
[CSS] 크롬(chrome) 이미지 흐릴 때
크롬은 이미지 랜더링 문제가 있습니다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 괜찮지만 원본 해상도보다 확대, 축소 되는 경우에는 이미지가 흐려집니다. 📋 image-rendering image-rendering이란 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 크기가 변경된 이미지에 적용됩니다. ✔ -webkit-optimize-contrast 이미지 랜더링 방식을 변경해줍니다. 크롬, 사파리 등의 브라우저에서 대비를 최적화하여 흐려지는 문제를 어느정도 해결해줍니다. 제가 사용해 봤을 때 이 방식이 제일 효과 있었습니다. 📋 transform ✔ translateZ transform: translateZ(0)을 이용하여 깊이감을 없애줍니다. 약간의 효과는 있었지만 image-..
