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

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 기능의 경우 변형 된 글꼴이 바삭하지 않기 때문에 사용하지 않습니다.

---

대신에

transform: scale(1.5);

사용

zoom : 150%;

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

---

Sunderls가 답을 알려줍니다. 제외하고 filter: scale는 존재하지 않지만 존재합니다 filter: blur.

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

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

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

---

This must be a bug with Chrome (Version 56.0.2924.87), but the below fixes the bluriness for me when changing css properties in the console('.0'). I'll report it.

filter: blur(.0px)

---

After trying everything else here with no luck, what finally fixed this issue for me was removing the will-change: transform; property. For some reason it caused horribly blurry looking scaling in Chrome, but not Firefox.

---

I found out, that the problem occures on relative transforms in any way. translateX(50%), scale(1.1) or what ever. providing absolute values always works (does not produce blurry text(ures)).

None of the solutions mentions here worked, and I think there is not solution, yet (using Chrome 62.0.3202.94 while I am writing this).

In my case transform: translateY(-50%) translateX(-50%) causes the blur (I want to center a dialog).

To reach a bit more "absolute" values, I had to set decimal values to transform: translateY(-50.09%) translateX(-50.09%).

NOTE

I am quite sure, that this values vary on different screen sizes. I just wanted to share my experiences, in case it helps someone.

---

Try using zoom: 101%; for complex designs when you can't use a combination of zoom + scale.

---

In my case following code caused blurry font:

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

and just adding zoom property fixed it for me. Play around with zoom, following worked for me:

zoom: 97%;   

---

Another fix to try i just found for blurry transforms (translate3d, scaleX) on Chrome is to set the element as "display: inline-table;". It seems to force pixel rounding in some case (on the X axis).

I read subpixel positioning under Chrome was intended and devs won't fix it.

---

Adding perspective(1px) worked for me.

transform: scale(1.005);

to

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

---

I have found a much better and clean solution:

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

or

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

Thanks to this post: Preventing blurry rendering with transform: scale

---

None of the above worked for me.

It worked when I added perspective

ie from

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

i changed to

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

---

I fixed my case by adding:

transform: perspective(-1px)

---

FOR CHORME:

I´ve tried all suggestions here. But diden't work. My college found a great solution, that works better:

You should NOT scale past 1.0

And include translateZ(0) in the hover but NOT in the none-hover/initial position.

Example:

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);
}

---

I used a combination of all answers and this is what worked for me in the end:

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

---

For me the problem was that my elements were using transformStyle: preserve-3d. I realized that this wasn't actually needed for the app and removing it fixed the blurriness.

---

None of above worked for me. I had this animation for popups:

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

In my case blurry effect was gone after applying this rule: -webkit-perspective: 1000; even though it is marked as unused in Chrome inspector.

---

I removed this from my code - transform-style: preserve-3d; and added this- transform: perspective(1px) translateZ(0);

the blur went away!

---

In Chrome 74.0.3729.169, current as of 5-25-19, there doesn't seem to be any fix for blurring occurring at certain browser zoom levels caused by the transform. Even a simple TransformY(50px) will blur the element. This doesn't occur in current versions of Firefox, Edge or Safari, and it doesn't seem to occur at all zoom levels.

---

you can use css filter to fix this.

.element {
    filter: blur(0);
}

about vendor-prefix, please do it by yourself.-webkit-filter,-ms-filter. detail is here http://browser.colla.me/show/css_transformation_scale_cause_blurring

---

The text won't be blurry if you don't transition the transform.

Just do this:

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

Without the transition like transition: all .2s;

---

It's important to add that this issue arises if the element which is being translated has a height with an odd number of pixels. So, if you have control over the height of the element, setting it to an even number will make the content appear crisp

참고URL : https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome