如何在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;
- text-rendering：geometricPrecision;
- webkit-font-smoothing：antialiased;
- moz-osx-font-smoothing：grayscale;

略相关的问题在那里我得到了这些解决方案： How to prevent text style defaults during CSS transition

来源

2016-12-14 Ahmed Tokyo

，我用当前的解决方法是：

取代：变换：规模（1.1）

有： transform：perspective（1px）scale（1.1）

这产生了类似的e无需处理webkit字体渲染大惊小怪。字体渲染统一解决方案会更好，但是我没有偶然发现任何类似于这种情况的东西。

来源

2016-12-14 12:33:17

如何在CSS缩放转换期间防止Webkit文本呈现更改

回答

相关问题