スマホからモーダルを開くときに白い画面がチラつく

前提・実現したいこと

スマートフォンからモーダルを開くときに画面がチラつく
白い画面が一瞬表示される
上記症状を無くしたい

PCからだとスムーズにモーダルが開きます

該当のソースコード

本番環境：https://y724u.github.io/Portfolio-Yusuke.Wada/

HTML
<div class="works__window js-modal" id="modal01">
      <div class="cursor__wrapper">
        <div class="cursor"></div>
      </div>
      <div class="works__bg js-modalClose js-cursor"></div>
      <div class="works__modal js-modalClose">
        <img class="works__close js-modalClose js-cursor" src="./images/pc/close.svg" alt="閉じるボタン">
        <div class="works__wrapper">
          <div class="works__image">
            <img src="./images/pc/works1.png" alt="ENTOR SERVICE">
          </div>
          <dl>
            <dt class="works__theme">ENTOR SERVICE</dt>
            <dt class="works__subname">Service Site</dt>
            <dd class="works__detail">
              ENTORとは、メンターにサポートをもとにプログラミング学習を行うサービスです。独自のカリキュラムの作成、回数無制限のソースコードのレビューや質問などを通じてエンジニアになることをサポートします。
            </dd>
          </dl>
          <dl class="works__explanation">
            <dt>Client</dt>
            <dd>Enclass</dd>
          </dl>
          <dl class="works__explanation">
            <dt>Skills</dt>
            <dd>Design / HTML,CSS / JavaScript</dd>
          </dl>
          <dl class="works__explanation">
            <dt>Site</dt>
            <dd>
              <a class="js-cursor" href="https://y724u.github.io/Entor_02/" target="_blank"
                rel="noopener noreferrer">Entor</a>
            </dd>
          </dl>
        </div>
      </div>
    </div>

css
// <-- modal -->
  &__window {
    height: 100vh;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: .5s ease-in;
    visibility: hidden;
    overflow: hidden;
    width: 100%;
    z-index: 200;

    &.show_modal {
      opacity: 1;
      visibility: visible;
    }
  }

  &__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
    cursor: pointer;
    z-index: 200;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  &__modal {
    cursor: pointer;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 890px;
    z-index: 300;

    @include mq(sm) {
      top: calc(40% + 50px);
      width: 80%;
    }
  }

  &__close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    top: calc(10% - 48px);
    right: 10%;
    z-index: 1000;

    @include mq(sm) {
      width: 20px;
      height: 20px;
      top: calc(15% - 50px);
      right: 0;
    }
  }

  &__wrapper {
    cursor: default;
    background-color: $key-color-white;
    font-size: 18px;
    height: 80%;
    left: 50%;
    line-height: 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;

    @include mq(sm) {
      width: 100%;
      height: 76%;
      padding: 30px;
    }
  }

  &__image {
    img {
      width: 100%;
    }

    @include mq(sm) {
      width: 100%;
      height: auto;
    }
  }

  &__theme {
    font-size: 26px;
    line-height: 37px;
    letter-spacing: .1em;
    margin-top: 24px;

    @include mq(sm) {
      font-size: 20px;
      line-height: 27px;
      letter-spacing: .05em;
      margin-top: 11px;
    }
  }

  &__subname {
    @extend %title-sub;
    font-size: 11px;
    line-height: 19px;
    letter-spacing: .1em;
    margin-top: 3px;

    @include mq(sm) {
      font-size: 12px;
      line-height: 13px;
      letter-spacing: .04em;
      margin-top: 2px;
    }
  }

  &__detail {
    @extend %modal-letter;
    line-height: 30px;
    margin: 11px 0 22px;

    @include mq(sm) {
      font-size: 12px;
      line-height: 26px;
      letter-spacing: .05em;
      margin: 20px 0 20px;
    }
  }

  &__explanation {
    align-items: center;
    display: flex;

    & + & {
      margin-top: 14px;
    }

    dt {
      @extend %modal-letter;
      color: $key-color-black;
      position: relative;
      line-height: 20px;

      @include mq(sm) {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: .04em;
      }
    }

    dd {
      @extend %modal-letter;
      position: absolute;
      left: 171px;
      line-height: 24px;

      a {
        border-bottom: 1px solid $font-black;
      }

      @include mq(sm) {
        font-size: 12px;
        left: 114px;
        line-height: 18px;
        letter-spacing: .04em;
      }
    }
  }

.fixed {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

JS
// <!-- サービスシステム開発モーダル -->
  $('.js-modalOpen').on('click', function (e) {
    e.preventDefault();
    const target = $(this).data('target');
    const modal = $('#' + target);
    $(modal).addClass('show_modal');
    return false;
  });
  $('.js-modalClose').on('click', function (e) {
    e.preventDefault();
    $('.js-modal').removeClass('show_modal');
    return false;
  });

  // <!-- モーダルスクロール止める -->
  let scrollPosition;
  $(".js-modalOpen").on("click", function(e) {
    e.preventDefault();
    scrollPosition = $(window).scrollTop();
    $('body').addClass('fixed').css({'top': -scrollPosition});
  });
  $(".js-modalClose").on("click", function(e) {
    e.preventDefault();
    $('body').removeClass('fixed').css({'top': 0});
    window.scrollTo( 0 , scrollPosition );
  });