[jQuery]addClassで文字色を変えると文字がズレる

Question

現在サイドメニューがあるWebページを作成しております。
たとえば、ページ内のAboutが表示されている間は、メニューのAbout部分(文字とその上のバー)の色を濃く変えたいと思っています。

以下のコードで実装はできたのですが、色が濃く変わると文字だけが少し上にズレてしまいます。
大きな問題はないのですが、原因を知りたいと思い、こちらに投稿いたしました。

      <div id="menublock1">
        <a href="#about"> <!--開いているときに色変更-->
          <img class="menubar" src="img/003bar.png" alt="メニューバー" border="0">
          <img class="current" src="img/003bar_change.png" alt="メニューバー" border="0">
          <h2 class="sidemenu">About</h2></a>
      </div>

#menublock1 {
    width: 18%;
    position: fixed;
    top: 15vw;
    left: 3vw;
}

.menubar {
    width: 56.8%;
}

.current{
display: none;
}

.current.vivid {
    width: 56.8%;
}

a {
    text-decoration: none;
}

.sidemenu {
    font-family: 'Fugaz One', cursive;
    font-weight: 400;
    color: #ff9bcdff;
    font-size: 2.5vw;
    letter-spacing: 0.03em;
    transform: rotate(-10deg);
    line-height: 60%;
    text-indent: 0.3em;
}

.sidemenu.vivid {
    color: #ff007fff;
}

$(function(){

  $(window).on('scroll',function(){

    $('#menublock1 .current, #menublock1 .sidemenu').each(function() {
      let now = $(window).scrollTop();
      let posTop = $('#about').offset().top;
      let posBottom = $('#about').offset().top + $('#about').outerHeight();

      if(posTop < now && now <= posBottom) {
        $(this).addClass('vivid');
        $('#menublock1 .current').show();
        $('#menublock1 .menubar').hide();
      } else {
        $(this).removeClass('vivid');
        $('#menublock1 .current').hide();
        $('#menublock1 .menubar').show();
      }
    });

  });

});

003bar.pngと003bar_change.pngの画像サイズは全く同じです。

試したこと
・CSS内.sidemenu.vividに.sidemenuと同様(文字色コード以外)の記述をする
→上記コードの挙動と変わりませんでした

確認に使用しているブラウザはMicrosoft Edgeです。

原因をご存知でしたらお教えいただけますと幸いです。