ホバリングアイテムのクロムが空白で点滅

Question

SafariとFirefoxではサイトの読み込みが正常に機能していますが、Google Chromeでは非常に奇妙な動作をしています。 Chromeはページの読み込みに苦労しているように見え、アニメーションは非常にぎらつく/白い派手です。どこから間違っていたのかわからないので、Chromeからローカルに移動する前にうまくいきました。

ここでは、メニューが表示されています。ホバー上にある場合は、クロムで白く点滅します。プラスはクロムがビューポートにないものをロードしないようです。

http://tjsbowties.com/

body { 
position: relative; 
background: #fffdfa; 
font-size: 16px; 

} 
.t-menu { 
position: absolute; 
width: 100%; 
top: 3em; 
height: 13em; 

z-index: 99; 

} 

.t-ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 

.t-menu-ul { 
position: relative; 
width: 100%; 
max-width: 80em; 
height: 13em; 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: center; 
align-items: center; 
padding: 1em 2em 0 2em; 
margin: 0 auto; 
} 

.t-menu-ul li { 
position: relative; 
display: inline-block; 
width: 8em; 
text-align: center; 
} 

a.t-link { 
position: relative; 
font-family: 'Caviar Dreams', sans-serif; 
font-weight: 900; 
color: #fffdfa; 
padding-bottom: 0.6em; 
border-bottom: 0.4em solid rgba(0,0,0,0); 
cursor: pointer; 

transition: all 0.2s ease-in-out; 
} 

a.t-link:hover { 
text-decoration: none; 
border-bottom: 0.4em solid #e7b32c; 
} 

.t-hero { 
position: relative; 
width: 100%; 
height: 100vh; 
min-height: 50em; 
max-height: 67.5em; 
border: 2em solid #fffdfa; 
border-top: 3em solid #fffdfa; 

background-image: linear-gradient(rgba(18, 5, 7, 0.4), rgba(18, 5, 7, 0.4)), url('/img/fl-hero-a.jpg'); 
background-blend-mode: multiply; 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 

transition: all 0.2s ease; 
} 


<nav class="t-menu"> 
     <ul class="t-ul t-menu-ul"> 
      <li> 
       <a class="t-link" href="https://www.facebook.com/tjsbowties" target="_blank"> 
        <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i> 
       </a> 
      </li> 
      <li> 
       <a class="t-link" href="https://www.instagram.com/tjs_bowties/" target="_blank"> 
        <i class="fa fa-lg fa-instagram" aria-hidden="true"></i> 
       </a> 
      </li> 
      <li class="logo-list-item"> 
       <img class="img-responsive margin-auto logo-img" src="/img/tj-bowties-logo.svg" alt="" /> 
      </li> 
      <li> 
       <a class="t-link page-scroll" href="#about"> 
        About 
       </a> 
      </li> 
      <li> 
       <a class="t-link" href="https://squareup.com/store/tjs-bowties/"> 
        Order 
       </a> 
      </li> 
     </ul> 
    </nav> 

Answer 1

私の解決策が見つかりました。モーダルを変更してcssの可視性を表示することで、可視と可視性：私の点滅の問題はなくなりました。問題は一度に多くのスワイパーが初期化されていたことです。