CSS transform 사용 후 흐릿한 텍스트 : scale (); Chrome에서

을 수행 한 후 흐릿한 텍스트를 유발하는 최근 Google 크롬 업데이트가있는 것 같습니다 transform: scale(). 특히 나는 이것을하고있다 :

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Chrome에서 http://rourkery.com 을 방문 하면 기본 텍스트 영역에 문제가 표시됩니다. 이 작업을 수행하는 데 사용되지 않았으며 Safari와 같은 다른 웹킷 브라우저에 영향을 미치지 않는 것 같습니다. 3D 변환과 유사한 문제를 겪고있는 사람들에 대한 다른 게시물이 있지만 이와 같은 2D 변환에 대해서는 아무것도 찾을 수 없습니다.

모든 아이디어를 주시면 감사하겠습니다!

나는이 문제를 여러 번 겪었고 그것을 고치는 2 가지 방법이있는 것 같다 (아래 참조). 이러한 속성 중 하나를 사용하여 렌더링을 수정하거나 동시에 둘 다 사용할 수 있습니다.

뒷면 가시성 숨김은 애니메이션을 오브젝트의 앞쪽으로 단순화하는 반면 기본 상태는 앞면과 뒷면이므로 문제를 해결합니다.

backface-visibility: hidden;

TranslateZ는 애니메이션에 하드웨어 가속을 추가하는 해킹으로도 작동합니다.

transform: translateZ(0);

이 두 가지 속성 모두 현재 겪고있는 문제를 해결하지만 일부 사람들은

-webkit-font-smoothing: subpixel-antialiased;

애니메이션 된 개체에. 웹 글꼴의 렌더링을 변경할 수 있지만 그 방법도 자유롭게 실험 해 볼 수 있습니다.

흐릿함을 개선하려면 esp. Chrome에서 다음을 시도하십시오.

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

업데이트 : Perspective 는 사용자와 z- 평면 사이의 거리를 추가하여 기술적으로 개체의 크기를 조정하여 흐릿함이 '영구적'인 것처럼 보입니다. perspective(1px)위 의 내용은 우리가 해결하려는 흐릿함과 일치하기 때문에 오리 테이프 와 같습니다 . 아래 CSS를 사용하면 더 나은 행운을 누릴 수 있습니다.

transform: translateZ(0);
backface-visibility: hidden;

스케일 비율을 조정하는 것이 약간 도움이된다는 것을 알았습니다.

scale(1.048)over를 사용하면 (1.05)전체 픽셀 글꼴 크기에 더 가까운 근사치를 생성하여 하위 픽셀 흐림을 줄였습니다.

또한 translateZ(0)변환 애니메이션에서 Chrome의 마지막 반올림 단계를 조정하는 것처럼 보이는 것을 사용했습니다 . 이것은 속도를 높이고 시각적 소음을 줄이기 때문에 내 onhover 사용에 대한 장점입니다. 그러나 onclick 기능의 경우 변형 된 글꼴이 바삭하지 않기 때문에 사용하지 않습니다.

운없이 다른 모든 것을 시도한 후 마침내이 문제를 해결 한 것은 재산 을 제거 하는 것이 었습니다 will-change: transform;. 어떤 이유로 크롬에서는 끔찍하게 흐릿하게 보이는 스케일링이 발생했지만 Firefox에서는 그렇지 않았습니다.

대신에

transform: scale(1.5);

사용

zoom : 150%;

Chrome의 텍스트 흐림 문제를 수정합니다.

이것은 Chrome (버전 56.0.2924.87)의 버그 일 것입니다. 그러나 아래는 콘솔 ( '.0')에서 CSS 속성을 변경할 때 저에게 흐릿함을 수정합니다. 보고하겠습니다.

filter: blur(.0px)

Sunderls는 나를 대답으로 안내합니다. 제외하고 filter: scale는 존재하지 않지만 존재합니다 filter: blur.

흐리게 보이는 요소에 다음 선언을 적용합니다 (제 경우에는 변환 된 요소 내부에 있음).

backface-visibility: hidden;    
-webkit-filter: blur(0);

그것은 거의 완벽했다. " 거의 "전환을 사용하고 있고 전환 중에는 요소가 완벽 해 보이지 않지만 전환이 완료되면 제대로 표시됩니다.

나는 문제가 어떤 식 으로든 상대 변환에서 발생한다는 것을 알았습니다. translateX (50 %), scale (1.1) 또는 무엇이든. 절대 값 제공은 항상 작동합니다 (흐릿한 텍스트 (ures)를 생성하지 않음).

여기에 언급 된 솔루션 중 어느 것도 작동하지 않았으며 아직 솔루션이 없다고 생각합니다 (이를 작성하는 동안 Chrome 62.0.3202.94 사용).

나의 경우에는 transform: translateY(-50%) translateX(-50%) 에는 흐림이 발생합니다 (대화 상자를 중앙에 배치하고 싶습니다).

좀 더 "절대적인"값에 도달하려면 십진수 값을 transform: translateY(-50.09%) translateX(-50.09%) .

노트

이 값은 화면 크기에 따라 다를 수 있습니다. 누군가에게 도움이 될 수 있도록 내 경험을 공유하고 싶었습니다.

훨씬 더 좋고 깨끗한 해결책을 찾았습니다.

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

또는

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

이 게시물 덕분에 transform : scale로 흐릿한 렌더링 방지

추가 perspective(1px)는 나를 위해 일했습니다.

transform: scale(1.005);

에

transform: scale(1.005) perspective(1px);

zoom: 101%;확대 / 축소 + 배율 조합을 사용할 수없는 경우 복잡한 디자인에 사용해보십시오 .

제 경우에는 다음 코드가 흐릿한 글꼴을 발생했습니다.

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

확대 / 축소 속성을 추가하는 것만으로도 문제가 해결되었습니다. 나를 위해 일한 다음 확대 / 축소로 놀아보십시오.

zoom: 97%;   

Chrome에서 흐릿한 변환 (translate3d, scaleX)에 대해 방금 찾은 또 다른 수정 사항은 요소를 " display : inline-table ;"로 설정하는 것입니다. 어떤 경우 (X 축에서) 픽셀 반올림을 강제하는 것 같습니다.

Chrome에서 하위 픽셀 위치 지정이 의도 된 것으로 읽었으며 개발자는이를 수정하지 않습니다.

2019 업데이트
Chrome 디스플레이 버그는 여전히 수정되지 않았으며 고객의 잘못은 아니지만이 웹 사이트 전체에서 제공되는 제안 중 어느 것도 문제 해결에 도움이되지 않습니다. 나는 그들 중 하나를 모두 헛되이 시도했다는 것에 동의 할 수있다. 단지 1 개만 가까워지고 그것이 CSS 규칙이다 : filter : blur (0); 이는 컨테이너의 1px 이동을 제거하지만 컨테이너 자체 및 포함 할 수있는 콘텐츠의 흐릿한 표시 버그를 해결하지 않습니다.

현실은 다음과 같습니다. 문자 그대로이 문제에 대한 해결책이 없으므로 유동 웹 사이트에 대한 해결 방법이 있습니다.

CASE
저는 현재 유동적 인 웹 사이트를 개발 중이며 3 개 div가 있으며 모두 호버 효과를 중심으로하고 너비와 위치 모두에서 백분율 값을 공유합니다. Chrome 버그는 left : 50 %로 설정된 중앙 컨테이너에서 발생합니다. 그리고 transform : translateX (-50 %); 일반적인 설정.

예 : 먼저 HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Chrome 버그가 발생하는 CSS는 다음과 같습니다.

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

여기에 고정 CSS가 있습니다.

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

버그가있는 바이올린 : https://jsfiddle.net/m9bgrunx/2/
고정 바이올린 : https://jsfiddle.net/uoc6e2dm/2/

보시다시피 CSS를 약간 조정하면 위치 지정을 위해 변환을 사용해야하는 요구 사항이 줄어들거나 없어집니다. 이는 고정 너비 웹 사이트 및 유동적에도 적용될 수 있습니다.

나는 이와 같은 문제가 있습니다. 나는 이것을 사용하여 고쳤다.

.element {
  display: table
}

위의 어느 것도 나를 위해 일하지 않았습니다. 팝업에이 애니메이션이 있습니다.

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

제 경우에는이 규칙을 적용한 후 흐릿한 효과가 사라졌습니다 -webkit-perspective: 1000;. Chrome 검사기에서 사용하지 않는 것으로 표시 되었더라도 말입니다.

내 솔루션은 다음과 같습니다.

디스플레이 : 초기;

그럼 바삭 바삭한

위의 어느 것도 나를 위해 일하지 않았습니다.

관점을 추가했을 때 효과가 있었어요

즉

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

나는 변했다

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

다음을 추가하여 케이스를 수정했습니다.

transform: perspective(-1px)

CHORME :

여기에서 모든 제안을 시도했습니다. 하지만 작동하지 않았습니다. 우리 대학은 더 잘 작동하는 훌륭한 솔루션을 찾았습니다.

1.0 이상으로 확장해서는 안됩니다.

그리고 translateZ(0)호버 에는 포함 하지만 호버 없음 / 초기 위치 에는 포함 하지 않습니다.

예:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

나는 모든 답변의 조합을 사용했고 이것이 결국 나를 위해 일한 것입니다.

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Chrome에서 흐릿한 텍스트 문제가 발생했지만 transform: translate(-50%,-50%).

글쎄, 나는 정말 다음과 같은 많은 해결 방법을 시도했습니다.

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

이것들 중 어느 것도 나에게 효과가 없었습니다.

마지막으로 요소의 높이와 너비를 균일하게 만들었습니다. 그것은 나를 위해 문제를 해결했습니다 !!!

참고 : 사용 사례에 따라 다를 수 있습니다. 그러나 시도할만한 가치가 있습니다!

나는이 답변에서 많은 예제를 시도했지만 불행히도 Chrome에 도움이되지 Version 81.0.4044.138 않고 대신 요소 변형에 추가했습니다.

 transform-origin: 50% 50%;

이 하나

 transform-origin: 51% 51%;

그것은 나를 위해 도움이된다

나에게 문제는 내 요소가 transformStyle: preserve-3d. 나는 이것이 실제로 앱에 필요하지 않다는 것을 깨달았고 그것을 제거하면 흐릿함이 해결되었습니다.

나는 이것을 내 코드에서 제거하고 이것을 transform-style: preserve-3d; 추가했습니다.transform: perspective(1px) translateZ(0);

흐림이 사라졌습니다!

Chrome 74.0.3729.169 (5-25-19 현재 현재)에서는 변환으로 인한 특정 브라우저 확대 / 축소 수준에서 발생하는 흐림에 대한 수정 사항이없는 것 같습니다. 단순한 TransformY(50px)것 조차도 요소를 흐리게 할 것입니다. 현재 버전의 Firefox, Edge 또는 Safari에서는 발생하지 않으며 모든 확대 / 축소 수준에서 발생하지 않는 것 같습니다.

CSS만으로는 해결하기 어려울 것입니다.

그래서 jquery로 해결했습니다.

이것은 내 CSS입니다.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

그리고 이것은 내 jquery입니다.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

수정 열풍에 추가하기 위해 나쁘게 보이는 개체 주위에 {border : 1px solid # ???}를 추가하면 문제가 해결됩니다. 안정적인 배경색을 가지고 있다면 이것도 고려하십시오. 이건 너무 멍청한 데 아무도 언급 할 생각이 없네요.

CSS filter를 사용하여이 문제를 해결할 수 있습니다 .

.element {
    filter: blur(0);
}

공급 업체 접두사에 대해서는 직접 수행하십시오. -webkit-filter, -ms-filter. 세부 사항은 여기 http://browser.colla.me/show/css_transformation_scale_cause_blurring

그렇지 않으면 텍스트가 흐릿하지 않습니다 transition.transform .

다음과 같이하십시오.

&:hover {
    transform: scale(1.1);
}

같은 전환 없이transition: all .2s;