크롬에서 이모지가 흐릿하게 보일 때

제품 지원
1

안녕하세요! 아주 미묘한 버그를 발견했습니다. 이모지가 다운스케일링되어 흐릿하게 보입니다. 관련 내용을 조사해 보았는데 이 링크로 이어졌습니다:

하지만 해결되지 않은 것 같습니다. 해당 게시물에 따라 Chrome과 Firefox에서 테스트해 봤는데, Chrome에서만 문제가 발생합니다.

참고로, 링크된 SO 게시물의 답변들을 종합하면 문제가 해결됩니다:

-webkit-filter: blur(0px); 
-webkit-transform: translate3d(0, 0, 0);

:melting_face: 예시 이모지

:melting_face: 예시 텍스트

2

제가 틀린 것일 수도 있지만, 크롬에서는 프로필 사진도 해상도가 낮은 것 같습니다.

3

이 문제는 Chrome의 이미지 다운스케일링 방식과 관련이 있을 것으로 보입니다. 예를 들어, 브라우저 인스펙터를 열고 이모지의 고유 차원(이 경우 72px 정사각형)으로 설정하면… 이미지가 선명하게 표시됩니다:

Screen Shot 2022-04-13 at 11.36.03 AM

추가 예시:

72 / 36 = 2 :white_check_mark: 선명한 이모지

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1.945 :x: 흐릿한 이모지

Screen Shot 2022-04-13 at 11.38.54 AM

우리는 이모지를 20px로 렌더링하므로:

72 / 20 = 3.6 :x: 흐릿한 이모지

Screen Shot 2022-04-13 at 11.43.56 AM

이론적으로 이모지 이미지에 72px 대신 60px를 사용하면 이 문제가 사라질 수 있을까요? 다만 이것이 픽셀 밀도/스케일링과 관련이 있는 것 같기도 합니다… 일부 기기는 2X, 일부는 3X를 사용하니까요 :thinking:

4

아니면 컬러 폰트를 기다릴 수도 있겠죠 :sweat_smile:

하나의 컬러 폰트 형식에 대한 광범위한 지원을 기대하고 있습니다. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

5

이 주제에서 컬러 폰트에 대한 논의가 있지 않았나요?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

6

SVG와 컬러 폰트를 사용하는 것이 더 나은 해결책일 수 있지만, 저는 여전히 CSS만으로 해결하는 방식을 추천합니다. CSS는 제 전문 분야는 아니지만, 기존 동작에 가장 적은 영향을 미치는 방법처럼 보이기 때문입니다.