Translate3d로 인해 WebKit 기반 브라우저에서 텍스트가 흐릿해지는 이유는 무엇입니까?

translate3d를 사용하는 애니메이션 요소의 Webkit 기반 흐릿한 텍스트 문제

iPhone을 포함한 WebKit 기반 브라우저에서 일반적으로 발생하는 문제는 다음과 같습니다. 애니메이션에 Translate3D를 구현한 후 텍스트가 왜곡되고 흐릿해졌습니다. 이는 애니메이션 방법으로 -webkit-transform:translate3d를 사용할 때 특히 많이 발생할 수 있습니다.

포럼에서 제안된 잠재적인 해결책 중 하나는 상대 위치 지정을 제거하고 -webkit-font-smoothing: 앤티앨리어싱 규칙을 추가하는 것이었습니다. 그러나 이러한 조정은 효과가 없는 경우가 많습니다.

더티 솔루션

우아하거나 최적은 아니지만 잠재적인 해결 방법으로 위치를 조정하는 방법은 변환 값이 문제를 완화하는 것으로 보고되었습니다.

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

이 기술은 분수를 사용하여 변환을 약간 상쇄하는 데 의존합니다. WebKit 브라우저에서 Translate3D 애니메이션과 관련된 흐림 효과를 방지하는 것 같습니다.

기타 고려 사항:

대체 접근 방식은 다음과 같습니다.

• 활용 Translate3d 대신 JavaScript 기반 애니메이션
• 특정 구현 내에서 텍스트 왜곡의 근본 원인을 찾아 직접 해결합니다.

위 내용은 Translate3d로 인해 WebKit 기반 브라우저에서 텍스트가 흐릿해지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!