3d 애니메이션을 번역한 후 Webkit 기반 텍스트가 흐려지는 이유는 무엇입니까?

Translate3d를 사용한 애니메이션 후 Webkit 기반 텍스트 왜곡: 지속적인 문제

Webkit을 사용하여 요소에 애니메이션을 적용한 후 텍스트가 흐릿하거나 왜곡되는 문제 기반 브라우저는 오랫동안 개발자들을 괴롭혀 왔습니다. 이 문제는 Safari 및 iPhone의 기본 브라우저와 같은 브라우저에 영향을 미칩니다.

배경:

JavaScript 기반 슬라이더는 부드러운 애니메이션을 위해 -webkit-transform:translate3d 속성을 활용하는 경우가 많습니다. 그러나 이 기술은 애니메이션 요소 내의 텍스트를 무심코 흐리게 만듭니다.

해결 시도 실패:

이 문제를 해결하기 위해 다음을 포함한 다양한 해결 방법이 시도되었습니다.

• 상대 위치 제거
• -webkit-font-smoothing: antialiased 추가

그러나 이러한 조치는 효과가 없는 것으로 입증되었습니다.

해결책:

다양한 옵션을 탐색했음에도 불구하고 텍스트 흐림을 일관되게 제거하는 유일한 해결책은 Translate3d를 완전히 우회하고 JavaScript 기반 애니메이션으로 되돌리는 것입니다. 그러나 이 절충안은 WebKit 지원 장치의 성능을 희생시킵니다.

부분적인 솔루션:

포괄적인 솔루션은 아직 파악하기 어려운 반면, 다소 왜곡:

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

이 기술은 요소의 위치와 변형에 0.1%의 약간의 오프셋을 도입합니다. 블러를 완전히 제거하지는 못하지만 그 영향을 크게 줄여줍니다.

위 내용은 3d 애니메이션을 번역한 후 Webkit 기반 텍스트가 흐려지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!