Chrome瀏覽器在懸停項目上閃爍白色空間

Safari和Firefox上的網站加載看起來不錯，但在Chrome瀏覽器中表現得非常奇怪。 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>

來源

2017-05-05 user7410323

你可以發佈代碼給你的問題？ –

好吧添加了一個問題發生的代碼示例，但它是整個網站 – user7410323

我認爲這是因爲您的頁面大小太大（〜6MB），這意味着如果您在頁面加載時懸停在某處（加載可能會花費一個很多時間），懸停動畫可能無法正常工作。 – shaochuancs

我的解決方案被發現。通過改變模態以獲得CSS可見性：可見和可見性：隱藏我的閃爍問題消失了。問題是太多的滑鼠正在被初始化。

來源

2017-05-18 14:58:30 user7410323

Chrome瀏覽器在懸停項目上閃爍白色空間

回答

相關問題