如何防止CSS缩放过渡期间Webkit文本呈现更改 [英] How to prevent Webkit text rendering change during CSS scale transition

问题描述

在过渡期间和过渡之后，如何防止文本粗细形式变为粗体?在将鼠标悬停在任何元素上之前，文本都很好. 将鼠标悬停在某个元素上之后，它会放大，但是会变为粗体，因此在它回缩(假定为原始状态)后，它仍然是粗体.

How do I prevent the text weight form changing to bolder during and after the transition? Before hovering on any element, the text is fine. After hovering over an element, it scales up however it changes to bold so after it scales back (supposedly to the original state) it is still bold.

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);**
          }
      }
  }
}

以前尝试过的解决方案(无效):

Previously tried solutions (didn't work):

• 使用CSS backface-visibility属性解决此问题.请参考此链接
• 使用-webkit-transform:translateZ(0px);
• 在主体上使用以下样式
  • 计数器重置:项目；
  • 文本呈现:geometricPrecision；
  • webkit-font-smoothing:抗锯齿；
  • moz-osx-font-smoothing:灰度；
  • Use CSS backface-visibility property to solve this problem. Refer to this link
  • Use -webkit-transform: translateZ(0px);
  • Use the following styling on body
    • counter-reset: item;
    • text-rendering: geometricPrecision;
    • webkit-font-smoothing: antialiased;
    • moz-osx-font-smoothing: grayscale;

    与这些解决方案相关的轻微问题: 如何防止CSS过渡期间文本样式默认设置

    Slightly related questions where I got these solutions: How to prevent text style defaults during CSS transition

    推荐答案

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

    A current workaround that I used is:

    替换:转换:scale(1.1)

    replace: transform: scale(1.1)

    with:transform:Perspective(1px)scale(1.1)

    with: transform: perspective(1px) scale(1.1)

    这产生了类似的效果，而不必处理Webkit字体渲染问题. 字体渲染统一解决方案会更好，但是我还没有偶然发现过这种情况下可以解决的问题.

    This produces the similar effect without having to deal with the webkit font rendering fuss. A font rendering unification solution would be better however I haven't stumbled on anything like that that worked with this situation.

    这篇关于如何防止CSS缩放过渡期间Webkit文本呈现更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！