Chrome 모달에서 글꼴이 흐릿해지는 이유는 무엇이며 어떻게 해결할 수 있나요?

Chrome의 글꼴 흐림

Chrome 사용자는 그 매력에도 불구하고 특히 모달 상자에서 글꼴이 흐리게 표시되는 문제에 직면할 수 있습니다. IE나 Firefox와 같은 다른 브라우저에서는 이러한 예외 현상이 뚜렷이 나타나지 않지만 Chrome에서는 이러한 당황스러운 동작이 나타납니다.

더 자세히 알아보기 위해 사용자는 "Start"라는 레이블과 연결된 CSS를 검사했습니다. 그들은 흐릿한 모양을 유발하는 CSS 규칙을 발견했습니다.

.md-modal {
    transform: translateX(-50%) translateY(-50%);
}

이 규칙은 모달 요소를 화면 중앙에 배치합니다. 그러나 이를 제거하면 모달의 중앙 정렬이 손실됩니다.

해결책

다행히 Y축 값을 약간 조정하여 해결 방법을 찾았습니다. 변환 속성에서. 사용자는 TranslateY(-50%)를 사용하는 대신 0.5px를 빼서 다음과 같은 결과를 얻었습니다.

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

이 미묘한 수정을 통해 모달 요소의 원하는 중심을 유지하면서 글꼴 흐릿함을 해결했습니다. 이 접근 방식은 백분율을 변경하거나 JavaScript 해결 방법을 사용하는 것에 비해 더 명확하고 간단한 솔루션을 제공합니다.

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