CSS 크기 조정 및 Translate3D로 인해 WebKit 브라우저에서 텍스트가 흐릿해지는 이유는 무엇입니까?

CSS 크기 조정 및 Translate3D에 대한 WebKit의 흐릿한 텍스트 수수께끼

Chrome 및 기타 WebKit 브라우저에서 Translate3d 결과와 함께 CSS 크기 조정을 적용하면 원치 않는 흐림 현상이 발생합니다. 크기가 조정된 콘텐츠에 대한 효과입니다. 이에 대한 주목할만한 예는 제공된 JS Fiddle에서 볼 수 있습니다.

문제 이해

WebKit 브라우저는 기본적으로 3D 변환 요소를 하드웨어 3D 가속을 위한 텍스처로 처리합니다. 이 접근 방식은 이러한 요소가 크기 조정과 3D 변환을 모두 수행할 때 흐릿한 아티팩트로 이어집니다.

제안된 해결 방법

안타깝게도 이 특정 문제에 대한 직접적인 해결 방법은 없습니다. 그러나 텍스트 크기를 늘리고 전체 요소의 크기를 줄이면 흐릿함을 완화할 수 있습니다. 이렇게 하면 고해상도 텍스처가 효과적으로 생성되어 흐림의 가시성이 줄어듭니다.

제공된 Fiddle(http://jsfiddle.net/SfKKv/)에서 텍스트 크기가 증가하고 오프셋이 일치합니다. 적용된 Translate3d의 양. 또한 앤티앨리어싱을 더욱 향상시키기 위해 텍스트 그림자가 도입되었습니다.

참고 사항

이 해결 방법이 특히 흐릿함을 완전히 제거하지는 못한다는 점을 인정하는 것이 중요합니다. 작은 글꼴이나 날카로운 모서리. 최종 목표가 선명한 텍스트를 얻는 것이라면 대체 렌더링 접근 방식이나 기술을 고려해야 할 수도 있습니다.

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