모달 상자에서 Chrome 글꼴 렌더링이 흐릿하게 나타나는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Chrome 글꼴 렌더링 흐림 해결: CSS 범인 식별

Chrome의 흐릿한 글꼴 문제는 수년간 사용자를 괴롭혀 왔습니다. 그 원인에 대한 끝없는 논쟁. 이 경우 사용자는 Chrome 버전 39의 모달 상자 내에서 심각한 흐림 현상을 경험했습니다.

제공된 CSS 코드를 철저히 조사한 결과 원인이 모달 상자 위치를 담당하는 CSS 속성에 있는 것으로 나타났습니다. 특히 Y축 변환을 설정하는 '변환' 속성에 문제가 발생합니다.

transform: translateX(-50%) translateY(-50%);

이 특정 설정으로 인해 모달 내의 텍스트가 흐릿하게 나타납니다. 사용자는 값을 실험하면서 Y축 변환에서 0.5px를 빼면 문제가 해결된다는 사실을 발견했습니다.

업데이트된 CSS:

transform: translateX(-50%) translateY(calc(-50% - 0.5px));

이 수정으로 글꼴 렌더링이 효과적으로 선명해졌습니다. 모달 상자의 정렬을 변경하지 않고 흐리게 문제를 해결합니다. 사용자는 이 솔루션이 백분율 값을 조정하거나 JavaScript에 의존하는 것보다 더 우아하다고 지적합니다.

위 내용은 모달 상자에서 Chrome 글꼴 렌더링이 흐릿하게 나타나는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!