CSS 축척 전환 중에 Webkit 텍스트 렌더링 변경을 방지하는 방법

전환 도중이나 이후에 텍스트 가중치 형식이 과도하게 변경되는 것을 방지하려면 어떻게합니까? 어떤 요소로든 움직이기 전에 텍스트는 괜찮습니다. 요소 위에 마우스를 올리면 비율이 올라가지만 굵게 표시되므로 원래 상태로 축소 된 후에도 여전히 굵게 표시됩니다.CSS 축척 전환 중에 Webkit 텍스트 렌더링 변경을 방지하는 방법

HTML

<div class="ta-navbar-collapse" ng-class="{'toggled': toggled}"> 
    <ul class="nav navbar-nav"> 
     <li> 
      <a href="/home">AY KALAM</a> 
     </li> 
     <li> 
      <a href="/home">AY KALAM</a> 
     </li> 
     <li> 
      <a href="/home">AY KALAM</a> 
     </li> 
     <li> 
      <a href="/home">AY KALAM</a> 
     </li> 
    </ul> 
</div>

SCSS

.ta-navbar-collapse { 
    &>ul>li { 
     margin-bottom: 10px; 
     &:last-child { 
      margin-bottom: 0; 
     } 
     &>a { 
     transition: all 0.2s ease-in-out; 
     **transform: scale(1);** 
     -webkit-transform: translateZ(0px); 
      color: $primary-color; 
      &:active, 
      &:focus, 
      &:hover { 
       background-color: inherit !important; 
       outline: $hiddenOutline; 
      } 
      &:hover { 
       **transform: scale(1.1);** 
      } 
     } 
    } 
}

이전에 시도 솔루션 (작동하지 않았다)이 문제를 해결하기

를 사용하여 CSS의이면에는 가시성 속성입니다. 이것을 참조하십시오 link
-webkit-transform을 사용하십시오 : translateZ (0px);
본문에는 다음과 같은 스타일을 사용하십시오.
- counter-reset : item;
- 텍스트 렌더링 : geometricPrecision;
- webkit-font-smoothing : 안티 앨리어싱;
- moz-osx-font-smoothing : 그레이 스케일;

나는이 솔루션을 가지고 약간 관련된 질문 : How to prevent text style defaults during CSS transition

출처

2016-12-14 Ahmed Tokyo

내가 사용하는 현재의 해결 방법입니다 :

대체 : 변환 : 규모 (1.1)

을 함께 : 변형 : 원근법 (1px) 눈금 (1.1)

이렇게하면 webkit 글꼴 렌더링 소란을 다루지 않아도됩니다. 글꼴 렌더링 통합 솔루션이 더 좋았지 만,이 상황에서 효과가있는 것과 같은 것을 발견하지 못했습니다.

출처

2016-12-14 12:33:17

CSS 축척 전환 중에 Webkit 텍스트 렌더링 변경을 방지하는 방법

답변

관련 문제