如何在 CSS 缩放过渡期间防止 Webkit 文本呈现变化答案

【问题标题】：How to prevent Webkit text rendering change during CSS scale transition如何在 CSS 缩放过渡期间防止 Webkit 文本呈现变化
【发布时间】：2017-04-29 18:03:21
【问题描述】：

如何防止文本粗细形式在过渡期间和过渡后变为粗体？在悬停在任何元素上之前，文本都很好。将鼠标悬停在一个元素上后，它会放大，但会变为粗体，因此在缩小（假设为原始状态）后，它仍然是粗体。

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 backface-visibility 属性来解决这个问题。参考这个link
使用-webkit-transform: translateZ(0px);
在正文上使用以下样式
- 计数器重置：项目；
- 文本渲染：geometryPrecision；
- webkit-font-smoothing：抗锯齿；
- moz-osx-font-smoothing：灰度；

我从哪里得到这些解决方案的稍微相关的问题： How to prevent text style defaults during CSS transition

【问题讨论】：

标签： html css webkit

【解决方案1】：

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

替换：变换：比例（1.1）

with：变换：透视（1px）比例（1.1）

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

【讨论】：