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

Translate3d를 통한 WebKit 기반 브라우저의 흐릿한 텍스트 사후 애니메이션

WebKit 기반에서 -webkit-transform:translate3d를 사용하여 구현된 특정 애니메이션 iPhone과 같은 브라우저에서는 텍스트가 흐리거나 왜곡될 수 있습니다. 이 문제는 브라우저의 렌더링 엔진에서 발생하며 상대 위치 제거 또는 -webkit-font-smoothing: antialiased 적용과 같은 CSS 해결 방법을 통해 문제를 완화하려는 시도에도 불구하고 지속됩니다.

JavaScript 기반 애니메이션 방법으로 이 문제가 해결되지만 , WebKit 지원 장치의 성능을 방해합니다. 속도를 저하하지 않고 문제를 피하려면 변환 값을 약간 변경하는 것이 해결 방법입니다.

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

이 분수 오프셋은 3D 애니메이션 번역의 성능 이점을 유지하면서 흐릿함을 효과적으로 제거합니다.

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