CSS 변환 사용 후 흐린 텍스트: scale(); Chrome에서

CSS 변환 사용 후 흐린 텍스트: scale(); Chrome에서

최근 Google Chrome에 업데이트가 되어 A/S 후에 흐릿한 텍스트가 발생하는 것 같습니다.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);
  }
}

크롬의 http://rourkery.com 을 방문하면 메인 텍스트 영역에 문제가 표시됩니다.이전에는 이런 작업을 하지 않았고 사파리와 같은 다른 웹킷 브라우저에도 영향을 미치지 않는 것 같습니다.사람들이 3D 변환에 대해 비슷한 문제를 경험했다는 다른 게시물이 있었지만, 이와 같은 2D 변환에 대해 아무것도 찾을 수 없습니다.

어떤 아이디어라도 주시면 감사하겠습니다, 감사합니다!

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

숨겨진 백페이스 가시성은 애니메이션을 객체의 앞쪽으로만 단순화하기 때문에 문제를 해결합니다. 기본 상태는 앞쪽과 뒤쪽입니다.

backface-visibility: hidden;

트랜슬레이트 Z는 애니메이션에 하드웨어 가속을 추가하기 위한 해킹이기 때문에 작동합니다.

transform: translateZ(0);

이 두 속성 모두 사용자가 겪고 있는 문제를 해결할 수 있지만 일부 사용자는 추가하기를 원합니다.

-webkit-font-smoothing: subpixel-antialiased;

그들의 활기찬 대상에.웹 폰트의 렌더링을 변경할 수 있지만 그 방법도 자유롭게 실험해 볼 수 있습니다.

운이 없게도 여기서 다른 모든 것을 시도한 후에, 마침내 이 문제를 해결한 것은 그 문제를 제거하는 것이었습니다.will-change: transform;소유물. 이유에서인지 그것은 Chrome에서 끔찍하게 흐릿하게 보이는 스케일링을 일으켰지만 Firefox는 아니었습니다.어떤 이유에서인지 그것은 Chrome에서 끔찍하게 흐릿하게 보이는 스케일링을 야기시켰지만 Firefox는 그렇지 않았습니다.

Chrome에서 특히 흐릿함을 개선하기 위해 다음과 같은 작업을 시도해 보십시오.

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

원근법은 사용자와 z-평면 사이에 거리를 더해서 물체의 크기를 기술적으로 조정하여 흐릿함을 '영구적'으로 보이게 합니다.perspective(1px)위의 내용은 오리 tape와 같습니다. 우리가 해결하고자 하는 흐릿함을 맞추는 것이기 때문입니다.아래의 CSS는 운이 더 좋을 수도 있습니다.

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

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

으로.scale(1.048)위에(1.05)서브 픽셀 흐림을 줄여 전체 픽셀 글꼴 크기에 대해 더 나은 근사치를 생성하는 것처럼 보였습니다.

저도 사용했습니다.translateZ(0)변형 애니메이션에서 크롬의 마지막 라운딩 단계를 조정하는 것 같습니다.이것은 속도를 높이고 시각적 소음을 줄여주기 때문에 나의 이동 용도에 이점이 있습니다.하지만 온클릭 기능의 경우, 변형된 폰트가 바삭바삭한 것 같지 않아서 사용하지 않을 것 같습니다.

대신에

transform: scale(1.5);

사용.

zoom : 150%;

Chrome의 텍스트 흐림 문제를 해결합니다.

이것은 Chrome(버전 56.0.2924.87)의 버그임에 틀림없지만, 아래는 콘솔('.0')에서 css 속성을 변경할 때 블러링을 수정해 줍니다.신고하겠습니다.

filter: blur(.0px)

선덜스가 제게 답을 알려줍니다.제외하고filter: scale존재하지 않지만,filter: blur.다.

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

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

거의 완벽하게 작동했습니다."거의" 전환을 사용하고 있고 전환 중에는 요소가 완벽해 보이지 않지만 전환이 완료되면 요소가 완벽해 보입니다.

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

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

아니면

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

이 게시물 덕분에: 변환으로 흐릿한 렌더링 방지: 스케일

내 경우 다음 코드로 인해 글꼴이 흐릿해졌습니다.

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

줌 속성을 추가하는 것만으로 해결할 수 있었습니다.줌을 사용하여 게임을 즐기십시오.

zoom: 97%;   

나는 어떤 방식으로든 상대적 변환에서 문제가 발생한다는 것을 발견했습니다. 번역 X(50%), 스케일(1.1) 또는 무엇이든. 절대값을 제공하는 것은 항상 작동합니다(흐린 텍스트(ure)를 생성하지 않음).

여기에 언급된 솔루션 중 아무 것도 작동하지 않았으며, 아직 해결책이 없는 것 같습니다(이 글을 쓰는 동안 Chrome 62.0.3202.94 사용).

나같은 경우에는transform: translateY(-50%) translateX(-50%)흐림을 유발합니다(대화 상자의 가운데를 맞춥니다).

"절대" 값에 조금 더 도달하기 위해서는 소수점 값을 다음과 같이 설정해야 했습니다.transform: translateY(-50.09%) translateX(-50.09%).

메모

저는 이 값이 화면 크기에 따라 다를 것이라고 확신합니다.누군가에게 도움이 될까봐 경험을 공유하고 싶었을 뿐입니다.

저에게도 똑같은 문제가 있습니다.다음을 사용하여 수정했습니다.

.element {
  display: table
}

크롬에서 흐릿한 변환(번역 3d, 스케일X)에 대해 방금 찾은 또 다른 해결책은 요소를 "디스플레이: 인라인 테이블;"로 설정하는 것입니다.어떤 경우에는 픽셀 라운딩을 강요하는 것 같습니다(X축).

Chrome에서 서브픽셀 위치 지정이 의도되었다고 읽었는데 개발자들이 수정하지 않습니다.

사용해보기zoom: 101%;줌+스케일 조합을 사용할 수 없을 때 복잡한 설계에 사용할 수 있습니다.

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

이것이 현실입니다. 말 그대로 이 문제에 대한 해결책은 없으므로 유동적인 웹 사이트에 대한 해결책이 있습니다.

CASE .
저는 현재 유동적인 웹사이트를 개발하고 있으며 3개의 디브를 가지고 있으며, 모두 호버 효과와 폭과 위치 모두에서 공유하는 퍼센티지 값을 중심으로 합니다.Chrome 버그는 왼쪽: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>

여기 크롬 버그가 발생하는 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에 약간의 수정을 가하면 위치 지정에 변환을 사용해야 하는 요구사항이 줄어들거나 없어지는 것을 볼 수 있습니다.이는 유체뿐만 아니라 고정 너비 웹 사이트에도 적용될 수 있습니다.

번역 중인 요소의 높이가 홀수 픽셀인 경우 이러한 문제가 발생함을 유의해야 합니다.따라서 요소의 높이를 제어할 수 있는 경우 짝수로 설정하면 내용이 바삭바삭하게 표시됩니다.

위의 것들은 하나도 저에게 통하지 않았습니다.팝업용 애니메이션이 있었습니다.

@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 inspector에서 사용되지 않는 것으로 표시되어 있음에도 불구하고.

위의 것들 중 어느 것도 저에게 효과가 없었습니다.

원근감을 더했을 때 효과가 있었습니다.

즉 로부터

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

나는바꼈습니다.

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

저는 모든 답변을 조합하여 사용했고 이것이 결국 저에게 효과적이었습니다.

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

해결책은 다음과 같습니다.

디스플레이: 이니셜;

그리고는 바삭바삭했습니다.

Chrome에서는 흐린 텍스트 문제가 발생했지만 사용할 때 Firefox에서는 발생하지 않았습니다.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%;

그것은 나에게 도움이 됩니다.

이것이 제게 효과가 있었던 것입니다.

body { perspective: 1px; }

다음과 같이 추가함으로써 사건을 해결했습니다.

transform: perspective(-1px)

내 코드에서 이걸 뺐어요transform-style: preserve-3d;도 덧붙였어요-에...transform: perspective(1px) translateZ(0);

흐릿함이 사라졌습니다!

CORME용:

저는 여기서 모든 제안을 시도해 보았습니다.하지만 효과가 없었습니다.저희 대학은 더 효과적인 훌륭한 해결책을 찾았습니다.

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

Chrome 74.0.3729.169, 현재 5-25-19에서 변환으로 인한 특정 브라우저 줌 레벨에서 발생하는 블러링에 대한 수정 사항은 없는 것으로 보입니다.간단한것도TransformY(50px)요소가 흐려질 겁니다 는 현재 버전의 Firefox, Edge 또는 Safari에서는 발생하지 확대/ 수준에서도발생하지 않는 것으로 보입니다.이는 현재 버전의 Firefox, Edge 또는 Safari에서는 발생하지 않으며, 일부 확대/축소 수준에서도 발생하지 않는 것으로 보입니다.

그래서. 위의 모든 솔루션을 시도해 보았지만 실제로는 아무 것도.하지만!

제 리액트 앱의 인덱스.html에 modal-root div가 있습니다.필요하다면 Modal 구성요소(.modal)를 렌더링합니다.먼저 모달 자체를 고정시켜 상단 왼쪽 50%로 만들고 중심을 잡기 위해 전환(-50%, -50%)을 적용했습니다.

크롬 브라우저의 줌 비율이 100%가 아닌 경우 확대 및 축소하여 모달 콘텐츠의 흐릿함을 확인하였습니다.110%일 수도 있고 90-80-75%일 수도 있습니다. 상관없습니다.100% 줌을 제외하고는 정말 흐릿하고 추했습니다.

그래서 저는 .modal 요소의 자식을 중심에 두기 위해 이전에 가지고 있던 전환 기반 솔루션 전체를 없애기로 결정했습니다.

modal-root fixed를 positioning하여 top-left-right-bottom 0으로 하고 있으므로 항상 100vh 및 wv입니다.그런 다음 플렉스 컨테이너로 만들고 정렬 항목과 정당화 내용 중심을 통해 아이를 배치했습니다.

근데! 항상 있어요.modal-root의 z-index: -1은 기본값입니다.모달이 열리면 프로그래밍 방식으로 59로 변경하기로 했습니다.또한 나머지 페이지를 어둡게 만드는 오버레이를 적용합니다. 즉 z 인덱스가 60인 .overlay입니다.실제 모달 콘텐츠(.modal)의 z 지수는 61입니다.

저는 또한 그 요소가 등장할 때 그것의 입구를 애니메이션으로 만들고 싶었습니다. 그래서 저는 그것에 어떤 종류의 전환을 적용하는 대신에 여백을 가지고 놀고 있습니다.이 애니메이션은 큐빅 베이저 애니메이션으로 애니메이션 내에서 마진톱을 비율에 따라 처리하지만 마지막에는 전환 특성이 없는 마진톱 0입니다.

부품을 재작업해야 해서 아쉬웠지만 테스트해보니 꽤 잘 작동합니다.

요약:.

• 상위 컨테이너 고정, 전체 페이지 포함
• 모달과 상호 작용을 원하는 경우 가장 높은 상위 컨테이너의 z-index -1 또는 [custom-value] 설정(모달이 열려 있음)
• modal이 닫힌 경우 컨테이너의 z-index를 -1
• 용기를 플렉스 용기로 만들고 어린이를 가운데에 배치합니다.
• 전환 대신 마진 값을 통해 자식 애니메이션 만들기

여러분들께 조금이나마 도움이 되었으면 좋겠습니다 :)

섬세한 3D 효과를 주기 위해 작은 원근법을 적용한 디브가 있습니다.디브의 텍스트가 흐려져서 여기에 있는 모든 제안을 시도했지만 소용이 없었습니다.

이상하게도 텍스트 요소에 'filter:herit;'를 설정하면 명확성이 크게 향상됩니다.이유는 이해할 수 없지만요

도움이 될 경우를 대비한 제 코드는 다음과 같습니다.

html:

<div id="NavContainer">
    <div id="Nav">
        <label>Title</label>
        <nav>
            <a href="/">home</a>
            <a href="/link1">link1</a>
            <a href="/link2">link2</a>
        </nav>
    </div>
</div>

CSS:

    #NavContainer {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 20px;
        right: 20px;
        perspective: 80vw;
        perspective-origin: top center;
    }

    #Nav {
        text-align: right;
        transform: rotateX(-5deg);
    }

        #Nav > nav > a,
        #Nav > label {
            display: inline-block;
            filter: inherit;
        }

        #Nav > label {
            float: left;
            font-weight: bold;
        }

제게 있어서 문제는 제 요소들이transformStyle: preserve-3d 그것을 을 고쳤습니다 저는 이것이 실제로 앱에 필요하지 않다는 것을 깨달았고 그것을 제거하여 흐릿함을 고쳤습니다.

CSS만으로는 해결이 어려울 것 같습니다.

그래서 제가 jquery로 풀었어요.

이것은 내 CSS입니다.

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

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

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

그리고 이건 내 잡동사니입니다.

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

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