728x90
크롬은 이미지
랜더링 문제가 있습니다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 괜찮지만
원본 해상도보다 확대, 축소 되는 경우에는 이미지가 흐려집니다.
📋 image-rendering
image-rendering이란 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 크기가 변경된 이미지에 적용됩니다.
✔ -webkit-optimize-contrast
이미지 랜더링 방식을 변경해줍니다.
크롬, 사파리 등의 브라우저에서 대비를 최적화하여 흐려지는 문제를 어느정도 해결해줍니다.
제가 사용해 봤을 때 이 방식이 제일 효과 있었습니다.
📋 transform
✔ translateZtransform: translateZ(0)을 이용하여 깊이감을 없애줍니다. 약간의 효과는 있었지만
image-rendering 방식보다는 흐린점이 약간 보였습니다.
📋 backface-visibility
backface-visibility란 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.
✔ hiddenbackface-visibility: hidden을 이용하여 transform: translateZ(0)와 비슷하게
뒷면을 보이지 않게해서 입체감을 없애줍니다.
728x90
