導航菜單在頁面間移動時閃爍，僅在Chrome中使用

我在創建的網站上遇到問題。當您逐頁移動時，導航菜單閃爍，但僅在Chrome和IE中閃爍。導航菜單在頁面間移動時閃爍，僅在Chrome中使用

更奇怪的是，當我在Chrome的icognito窗口中打開它或者在本地加載它時，它不會發生。

這裏是一個活生生的例子 - http://andrewbruce.me

我把下面的代碼 -

導航HTML -

<body> 

<div class="menuButton" onclick="decide(this);"> 
    <div id = "bar1"></div> 
    <div id = "bar2"></div> 
    <div id = "bar3"></div> 
</div> 

<div id ="nav"> 
    <ul> 
     <a href = "home.html"><li>HOME<span style = "float: right; padding-right: 2%;">></span></li><a/> 
     <a href = "portfolio.html"><li>PORTFOLIO<span style = "float: right; padding-right: 2%;">></span></li><a/> 
     <a href = "cv.html"><li>CV<span style = "float: right; padding-right: 2%;>></span></li><a/> 
     <a href = "contact.html"><li>CONTACT<span style = "float: right; padding-right: 2%;">></span></li><a/> 
    </ul> 
</div>

導航CSS -

#nav { 
    height: 100%; 
    width: 22%; 
    text-align: center; 
    box-shadow: 2px 2px 5px #888888; 
    transition: all .3s ease-in-out; 
    background-color: #1b1d1f; 
    float: left; 
    position: fixed; 
    z-index: 2; 
} 

#nav ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 100%; 
    line-height: 2; 
    margin-top: 20%; 
} 

#nav a { 
    text-decoration: none; 
} 

#nav li { 
    transition: all .2s ease-in-out; 
    color: white; 
    font-size: 25px; 
    text-align: left; 
    padding-left: 15px; 
}

來源

2016-11-26 Andrew Bruce