[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です。

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

Answer 1

HTMLコードが抜粋のため、動作確認できないので、推測ですが、、、、

色が濃く変わると文字がずれるとのことですが、文字色が変わっただけでずれることはありません。

        $(this).addClass('vivid');
        $('#menublock1 .current').show();
        $('#menublock1 .menubar').hide();

上記のコードの show() hide()で要素の表示、非表示をしているのが原因ではないでしょうか。
あと、

.current.vivid {
    width: 56.8%;
}

.vivid があるときだけ幅を指定してますが、jQueryで vividの付け外しをしているので、それが原因かもしれません。

Comments

[nkfn_39]

ご回答いただきありがとうございます。

前者については、show() hide() でなく全てaddClassにすることで試しましたが、挙動は変わりませんでした。

また、後者についても、.currentで先にサイズを指定しておき、vivid付与時にはdisplayを値blockで指定してみましたが、変わらず少し上にズレてしまいました。

度々申し訳ありませんが、他にやるべきことがございましたらお教えいただけますと幸いです。

【追記】
自分でも色々と検索していたのですが、とあるサイトで答えを見つけました。
.current.vividをdisplay: inlineにしたところ解決いたしました。
この度は貴重なお時間を割いていただき誠にありがとうございました。

Answer 2

CSSの.current.vividにdisplay: inline;の記述をしたところ、文字がズレませんでした。

(【追記】つまり、jQueryから$('#menublock1 .current').show(); $('#menublock1 .current').hide();は除き、currentの表示/非表示はaddClassで切り替えるようにしました)

参考にしたのはこちらのサイトです。
jQuery | display:noneから表示に戻すとレイアウトが崩れる原因と対処法

この度はお騒がせいたしました。
ご回答くださったhatena19さま、ご覧いただいた皆さま、誠にありがとうございました。