Chrome 모달 상자 글꼴이 흐릿한 이유와 해결 방법은 무엇입니까?

모달 상자의 Chrome 글꼴 흐림: CSS 문제 해결

Chrome 사용자는 모달 상자 내에서 흐릿한 글꼴을 경험할 수 있으며, IE 및 Firefox는 이를 명확하게 표시합니다. 이러한 차이는 텍스트 렌더링에 영향을 미치는 특정 CSS 속성으로 인해 발생합니다.

이 문제는 모달 컨테이너에 적용된 변환 속성, 즉 변환:translateX(-50%)translateY(-50%)에서 발생합니다. 이 변환은 모달을 너비와 높이의 절반으로 효과적으로 이동시켜 글꼴이 흐릿하게 나타나는 렌더링 이상을 일으킵니다.

이 문제를 해결하려면 Y축 변환에서 작은 값을 빼서 CSS를 수정할 수 있습니다. . 마이너스 50% 값에서 0.5px를 빼면 텍스트 렌더링이 부드럽고 선명해집니다.

수정된 코드 조각은 다음과 같습니다.

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

이 솔루션을 사용하면 모달이 중앙에 유지되는 동안 흐릿한 글꼴 문제를 제거합니다. CSS를 미세 조정하면 Chrome 브라우저는 다른 브라우저와 마찬가지로 모달 상자에 글꼴을 명확하게 표시할 수 있습니다.

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