CSS scale 및 Translate3d를 사용할 때 WebKit 텍스트가 흐려지는 이유는 무엇입니까?

CSS Scale 및 Translate3D를 사용하여 WebKit 텍스트 흐리게 처리

개발자는 CSS를 사용할 때 Chrome 및 기타 WebKit 브라우저에서 렌더링된 텍스트가 지나치게 흐려지는 문제에 직면합니다. 스케일링(scale 또는 scale3d)은translate3d 변환과 결합됩니다. 이는 단순화된 예에서 확인할 수 있습니다.

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner {
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

해결 방법:

WebKit은 3D 변형 요소를 텍스처로 처리하므로 이 문제를 해결하려면 고유한 접근 방식이 필요합니다. 벡터보다는 흐려지는 문제를 해결하려면 텍스트 크기를 늘리고 요소 크기를 줄여 효과적으로 고해상도 텍스처를 생성하세요.

이 해결 방법으로 업데이트된 예:

<div class="test">
  <div class="testInner">
<pre class="brush:php;toolbar:false">.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
  filter: scale(0.8);
}

이 접근 방식은 효과적이지만 흐림을 줄이더라도 여전히 일부 앤티앨리어싱 문제가 나타날 수 있습니다. 이를 완화하려면 텍스트 그림자를 추가하여 텍스트 모양을 향상시킬 수 있습니다.