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この問題を解決するための背面-visibilityプロパティ。これを参照してくださいlink
-webkit-transformを使用してください：translateZ（0px）;
本体に次のスタイリングを使用してください。
- counter-reset：item;
- テキストレンダリング：geometricPrecision;
- webkit-font-smoothing：アンチエイリアス。
- moz-osx-font-smoothing：グレースケール。

私はこれらのソリューションだ少し関連の質問：でスケール（1.1）

： How to prevent text style defaults during CSS transition

出典

2016-12-14 Ahmed Tokyo