Question

如何防止文本权重表单在转换期间和之后更改为更大胆？在悬停在任何元素上之前，文本没问题。将鼠标悬停在一个元素上后，它会向上扩展，但是它会变为粗体，所以在它向后缩放（据说是原始状态）之后它仍然是粗体。

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）;
在身体上使用以下样式
- counter-reset：item;
- text-rendering：geometricPrecision;
- webkit-font-smoothing：antialiased;
- moz-osx-font-smoothing：灰度;

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

Answer 1

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

替换：transform：scale（1.1）

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

这样可以产生类似的效果，而无需处理webkit字体渲染问题。一个字体渲染统一解决方案会更好但是我没有偶然发现那种适用于这种情况的东西。

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

1 个答案: