모달 상자에서 Chrome 글꼴이 흐릿한 이유는 무엇입니까?

모달 상자에서 Chrome 글꼴이 흐려짐

이 문제는 다른 상자에서는 글꼴이 선명하게 표시되지만 Chrome에서 모달 상자에서는 흐릿한 글꼴을 표시할 때 발생합니다. IE, Firefox와 같은 브라우저. 조사 결과 문제는 모달 컨테이너에 대한 CSS의 변환 속성에 있는 것으로 나타났습니다.

문제가 되는 CSS 규칙은 다음과 같습니다.

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

이 규칙은 모달 상자를 수평으로 중앙에 배치하고 양방향으로 50%만큼 수직으로 변환합니다. 그러나 Chrome에서는 이 번역으로 인해 글꼴이 흐려집니다.

해결책은 번역X() 및 번역Y() 값을 수정하는 것입니다. TranslateY() 값에서 0.5px을 빼면 렌더링 문제를 해결할 수 있습니다. 수정된 스니펫은 다음과 같습니다.

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

이 변경을 통해 모달이 여전히 정확하게 중앙에 위치하는 동시에 흐릿한 글꼴 렌더링이 제거됩니다. 백분율을 조정하거나 JavaScript 수정을 사용하는 것에 비해 더 깔끔한 솔루션을 제공합니다.

위에 표시된 CSS는 ".md-modal" 클래스에 대한 것이며 흐릿한 글꼴 문제는 다음과 같은 다른 상황에서 발생할 수 있습니다. 모달 상자가 사용됩니다. 이러한 경우 모달 중앙 정렬을 담당하는 관련 CSS 규칙을 편집하여 동일한 솔루션을 적용할 수 있습니다.

위 내용은 모달 상자에서 Chrome 글꼴이 흐릿한 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!