WebKit 브라우저에서 Translate3d 및 Scale3d를 사용할 때 텍스트가 흐려지는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

WebKit 브라우저에서 Translate3d 및 Scale3d를 사용할 때 텍스트가 흐려지는 이유는 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-16 12:20:03

원래의

703명이 탐색했습니다.

Why Does Text Blur When Using Translate3d and Scale3d in WebKit Browsers?

흐릿한 텍스트 수수께끼: WebKit의 CSS 크기 조정 및 Translate3d

Chrome을 포함한 WebKit 브라우저는 CSS 크기 조정 내의 텍스트라는 독특한 문제를 나타냅니다. Translate3d를 동시에 적용하면 내용이 눈에 띄게 흐려집니다. 이 동작은 제공된 JS Fiddle 예제에서 분명하게 나타납니다.

JS Fiddle 예제:

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

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

로그인 후 복사

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

로그인 후 복사

문제 해결:

이 문제를 완화하려면 다음을 수행하는 것이 좋습니다.

텍스트 크기 늘리기: 텍스트의 글꼴 크기를 늘려 크기 조정 및 번역으로 인해 발생하는 흐릿함을 보완합니다.
요소 축소: 확대된 텍스트에 맞게 포함 요소의 크기를 줄입니다. 이는 기본적으로 텍스트에 대해 더 높은 해상도의 텍스처를 생성하여 명확성을 향상시킵니다.

예:

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

로그인 후 복사

참고:

이 해결 방법은 흐릿한 문제를 해결하지만 여전히 수준 이하의 앤티앨리어싱을 초래할 수 있습니다. 가독성을 높이려면 .testInner 요소 내의 텍스트에 약간의 텍스트 그림자를 추가하는 것이 좋습니다.

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