CODEWITHSUNDEEP
htmlcsswebkit
Ahmed Tokyo
Ahmed Tokyo

Reputation: 57

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):

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

Upvotes: 2

Views: 995

Answers (1)

Ahmed Tokyo
Ahmed Tokyo

Reputation: 57

A current workaround that I used is:

replace: transform: scale(1.1)

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

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.

Upvotes: 2

Related Questions