How to prevent Webkit text rendering change during

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

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;

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

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.