导航菜单在从一个页面移动到另一个页面时闪烁，仅在 Chrome 中答案

【问题标题】：Navigation menu flickers when moving from page to page, only in Chrome导航菜单在从一个页面移动到另一个页面时闪烁，仅在 Chrome 中
【发布时间】：2016-11-26 15:29:08
【问题描述】：

我正在创建的网站上有问题。当您从一个页面移动到另一个页面时，导航菜单会闪烁，但仅在 Chrome 和 IE 中。

更奇怪的是，当我在 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;
}

【问题讨论】：

标签： html css navigation flicker

【解决方案1】：

我已经在 Chrome 和 Safari 中测试了您的网站，但似乎无法重现闪烁。闪烁可能是由于加载速度和导航栏刚刚加载。基于它仅在公共服务器上发生的事实。当您进行本地测试时，速度往往是即时的，因为它是直接从您计算机上的文件中提取的。

【讨论】：

【解决方案2】：

我想通了。我安装了一个 Chrome 扩展程序，它降低了浏览器的性能，因此加载导航栏很慢。

这就是为什么它在隐身模式下工作，因为没有加载任何扩展！

【讨论】：