CSS 전환 중 Webkit 텍스트 변경을 방지하는 방법

CSS 전환 중 Webkit 텍스트 변경을 방지하는 방법

---

CSS 전환 상태를 전환하기 위해 CSS 전환을 사용하고 있습니다 (기본적으로 요소의 크기 전환). 요소가 전환 될 때 페이지의 나머지 텍스트 (Webkit에서)는 전환이 완료 될 때까지 변경하는 경향이 있습니다.

바이올린 : http://jsfiddle.net/russelluresti/UeNFK/

나는 또한 있다는 것이 -webkit-font-smoothing: antialiased속성 / 값 쌍이 있는 내 헤더에서 발생하지 않는다는 것을 알았 습니다. 따라서 텍스트가 기본 모양 (글꼴 스무딩의 "자동"값)을 유지하고 전환을 변경하지 않는 방법이 궁금합니다.

"자동"값을 사용하는 텍스트를 명시 적으로 설정하려고 시도했지만 아무 작업도 수행하지 않았습니다. 또한 font-smoothing을 "none"으로 설정하면 전환 오류가 방지됩니다.

도움을 주시면 감사하겠습니다.

편집 1

제가 OS X를 사용하고 점에 유의해야합니다. Parallels의 Chrome에서 테스트를 보는 동안 두 개의 단락이 다르게 작동하는 것을 살펴보기 때문에 Mac 전용 문제 일 수 있습니다.

---

내가 생각할 것입니다.

-webkit-transform: translateZ(0px);

요소에 부모 하드웨어 가속 을 강제 하면 문제가 해결되는을 구석으로 같습니다.

편집 주석으로,이 해킹은 글꼴을 부드럽게하기를 따라 글꼴, 브라우저 및 OS에 따라 텍스트를 적용 할 수 있습니다!

---

2018 년 5 월 업데이트

-webkit-font-smoothing: subpixel-antialiased이제 Chrome에서는 효과가 없지만 Safari에서는 여전히 많은 것을 개선하지만 RETINA에서만 가능합니다. 망막 화면의 Safari에서 텍스트가 겸 텍스트가라고 멍청한 반면 텍스트는 적절한 무게를가집니다. 그러나 Safari의 비 레티 나 앰퍼에서 사용하면 (가벼운 가벼운 값에서) 텍스트는 재앙입니다. 미디어 쿼리를 사용하는 것이 좋습니다.

@media screen and (-webkit-min-device-pixel-ratio: 2) { body { -webkit-font-smoothing: subpixel-antialiased; } }

---

-webkit-font-smoothing: subpixel-antialiased더 이상 앤티 앨리어싱 된 텍스트를 부분적으로 피하려는 경우 명시 적으로 설정 하는 것이 최상의 솔루션입니다.

--tl; 박사-

기본 글꼴 변환이 하위 픽셀 앤티 앨리어싱을 사용하는 Safari와 Chrome에서, 위의 제안처럼 translateZ를 사용하여 사용하는 GPU 기반 코드를 강제하는 CSS는 Safari와 Chrome이 자동으로 "포기 "하위 픽셀 앤티 앨리어싱 된 글꼴 다듬기 대신 앤티 앨리어싱 된 텍스트로 전환합니다.

다른 응답자들은 더 많은 안티에 일리 어스 텍스트에 글꼴을 부드럽게 설정하거나 강제로 맞추 었습니다. 내 눈에 translateZ 또는 backface 숨김을 사용하면 텍스트가 일관성을 유지하고 더 많은 텍스트를 사용하는 것이 괜찮을 경우 최상의 솔루션 -webkit-font-smoothing: antialiased입니다. 그러나 명시 적으로 -webkit-font-smoothing: subpixel-antialiased실제로는 약간의 영향을 미칩니다. 텍스트는 여전히 약간의 변경되고 GPU에서 언급되는 전환 중에 눈에게 굳이 지지만이 설정이 없을 때만 큼 큼하다는 것이 있습니다. 따라서 최소한의 부분적으로 안티 에일 리 어스 텍스트로의 전환을 방해하는 것처럼 보입니다.

---

나는 -webkit-backface-visibility : hidden;을 사용하여 전환으로 인해 그래픽 문제 (깜박임 / 말더듬 / 항상 김 등)가 모든 때마다 거의 매번 발견했습니다. 작동하는 요소에 대해 문제를 해결하는 경향이 있습니다.

---

하드웨어 적으로 보내는 중 하나를 수행 할 수 있습니다.

1. 모든 텍스트를 -webkit-font-smoothing : antialiased로 설정합니다. 이 텍스트가 더라고 하위 픽셀 앤티 앨리어싱이 아님을 의미합니다.

2. 하드웨어 소피의 영향을받는 텍스트를 하위 픽셀 앤티 앨리어싱 (기본 종류의 글꼴 다듬기)하려는 경우 해당 텍스트를 선택적으로 입력 내부에있는 더 많은 해당 하위 픽셀이 앤티 앨싱됩니다 (최소한 Mac OS X의 Chrome). 다른 플랫폼에서는 테스트하지 않고 하위 픽셀 안티 앨리어싱이 중요하다면, 트릭을 사용할 수 있습니다.

---

Mac에서 Firefox를 사용하는 경우 다음 CSS를 사용하여 문제를 해결하는 것이 좋습니다.

-moz-osx-font-smoothing: grayscale;

자세한 내용 은 Firefox 및 Opera의 Webfont Smoothing 및 Antialiasing에서

---

이것이 나를 위해 일한 것입니다. 도움이되기를 바랍니다. 다른 stackoverflow 게시물에서 발견되었습니다.

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;

---

비용 변경을 방지 설정 font-smoothing: antialiased(또는 none) 해야합니다 .

하위 픽셀 글꼴을 사용하는 것이 좋습니다. 모든 배경 레이어에서 모든 배경 레이어에 대해 내용을 확인해야합니다. 이 성능을 심각하게 사용할 수 있습니다.

애플에 자주 사용 서브 픽셀 글꼴 다듬기 들이 자신의 사이트.

---

위의 솔루션 ( -webkit-transform: translateZ(0px)요소 및 -webkit-font-smoothing: antialiased페이지) 외에도 일부 요소는 여전히 잘못 작동 할 수 있습니다. 나를 위해 그것은 입력 요소의 자리 표시 자 텍스트였습니다.position:relative

---

나는 같은 문제가 있었다. 주의 깊게 진행됩니다.

요소가 전환 될 때 페이지 의 나머지 텍스트 (Webkit에서)는 전환이 완료 될 때까지 약간 변경하는 경향이 있습니다.

위의 솔루션 중 어느 것도 작동하지 않는 것입니다. 그러나 설정 (같은 것)

#myanimation { -webkit-transform: translateZ(0px); }

애니메이션 이 있는 요소에서 작동했습니다.

애니메이션 요소를 GPU 레이어로 가져와 가면 페이지에서 처리 할 수 ​​있습니다. 부작용으로 애니메이션과 페이지의 나머지 부분은 더 이상 서로 영향을주지 않습니다.

글꼴 렌더링에 영향을 미치는 경우 애니메이션 요소에만 영향을 미칩니다. 내 Chrome에서 차이가 보이지 않습니다.

참고 URL : https://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition