WebKit : CSS 스케일 + translate3d로 흐릿한 텍스트

WebKit : CSS 스케일 + translate3d로 흐릿한 텍스트

---

Chrome 및 기타 WebKit 브라우저에서 translate3d가 적용된 CSS 크기의 콘텐츠를 대량으로 흐리게 처리하는 문제가 있습니다.

다음은 JS Fiddle입니다 : http://jsfiddle.net/5f6Wg/ . (Chrome에서보기)

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

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

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

이에 대한 알려진 해결 방법이 있습니까? 위의 간단한 예제에서 나는 translate3d보다는 단순히 translate를 사용할 수 있다는 것을 알았습니다. 여기서 요점은 코드를 기본적인 요소로 제거하는 것입니다.

---

Webkit은 하드웨어 3d 가속을 제공하기 위해 3d 변형 된 요소를 벡터 대신 텍스처로 처리합니다. 이에 대한 유일한 해결책은 텍스트의 크기를 늘리고 요소를 축소하여 본질적으로 고해상도 텍스처를 만드는 것입니다.

여기를 참조하십시오 : http://jsfiddle.net/SfKKv/

앤티 앨리어싱은 여전히 ​​저조 함 (줄기 손실)이므로 약간의 텍스트 그림자로 텍스트를 강화하고 있습니다.

---

다음을 사용하여 발견했습니다.

-webkit-perspective: 1000;

글꼴 또는 아이콘 세트의 컨테이너에 Android nexus 4.2의 문제를 한동안 실험 한 후 상황이 선명하게 유지되었습니다.

---

CSS 필터 효과는 HTML 요소의 모양을 조작 할 수있는 그래픽 작업입니다. Chromium 19 이후로 이러한 필터는 GPU 가속으로 매우 빠르게 만듭니다.

CSS3는 여러 표준 필터 효과를 도입했으며 그중 하나는 블러 필터입니다.

-webkit-filter: blur(radius);

'반경'매개 변수는 화면에서 서로 블렌딩되는 픽셀 수에 영향을 미치므로 값이 클수록 더 많은 블러가 생성됩니다. 물론 0은 이미지를 변경하지 않습니다.

반경을 0으로 설정하면 브라우저가 GPU 계산을 사용하고 html 요소를 변경하지 않은 상태로 유지합니다. "하드 에지"효과를 적용하는 것과 같습니다.

이 흐릿한 효과를 수정하기위한 최선의 해결책은 다음과 같은 간단한 코드를 추가하는 것입니다.

-webkit-filter: blur(0);

망막 화면에만 영향을 미치는 알려진 버그도 있습니다. (여기를 참조하십시오 : 왜 blur (0)가 망막 화면에서 Webkit / Chrome의 모든 텍스트 흐림을 제거하지 않습니까? ). 따라서 망막에서도 작동하도록하려면 다음 두 번째 줄을 추가하는 것이 좋습니다.

-webkit-transform: translateZ(0);

---

이 시도

 ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

또는보다 정확한 접근 방식을 위해 javascript 함수를 호출하여 행렬의 10 진수 값을 제거하여 변환 행렬을 다시 계산할 수 있습니다. 참조 : https://stackoverflow.com/a/42256897/1834212

---

줌 플러그인 (http://janne.aukia.com/zoomooz/)과 함께 동위 원소 플러그인 (http://isotope.metafizzy.co/index.html)을 사용할 때이 문제가 발생했습니다. 내 사건을 처리하기 위해 jquery 플러그인을 만들었습니다. 누구든지 혜택을받을 수있을 경우를 대비하여 github 저장소에 버렸습니다. -https : //github.com/charleshimmer/jquery-hirestext .

---

나는 자바 스크립트를 사용하여 텍스트를 1px 위로 이동 한 다음 100ms 후에 다시 1px 아래로 이동했습니다. 거의 인식하지 못하고 브라우저 간 문제를 완전히 해결했습니다.

---

body {
-webkit-font-smoothing: subpixel-antialiased;
}

또는 특정 요소에 적용 할 수 있다고 생각하지만 하나의 요소가 전체 사이트에 영향을 미치는 데 문제가있었습니다.

커스텀 폰트 페이스 폰트의 문제라고 생각합니다.

---

Webkit은 하드웨어 3d 가속을 제공하기 위해 3d 변형 된 요소를 벡터 대신 텍스처로 처리합니다.

이것은 그것과 관련이 없습니다. 기간 및 방향 정보 (예 : 0.3 선형)를 추가하여 앨리어싱 문제를 해결할 수 있음을 알 수 있습니다. 런타임에 모든 것을 렌더링하려고 시도하는 암말이 있습니다.

위와 동일 ^

참조 URL : https://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d