如何消除转换引起的闪烁

时间：2016-06-16 14:01:51

标签： css google-chrome css-transitions flicker

当我反复鼠标移动两个下拉列表li，Portal和Retail时，整个ul.nav.navbar-nav中都会出现闪烁。如果这是特定于浏览器的问题，我在Windows 7上使用Chrome 51.我认为它与显示ul.nav.navbar-subnav的过渡效果相关但我似乎无法隔离问题。在我将子菜单添加到顶部标题之前，它才开始发生。下面是闪烁问题的演示，并将其与没有闪烁的this version进行比较。

更新实际上，我刚注意到aside中也发生了闪烁。如果我将--duration更改为0，则会消除闪烁。新问题：有没有办法保持opacity转换并仍然消除闪烁？

＆＃13;
＆＃13; 
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);
 html {
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
* {
  box-sizing: border-box;
}
a {
  cursor: pointer;
}
a.active-module {
  cursor: default;
}
li.active > a {
  cursor: default;
}
.topnavbar-wrapper {
  display: block;
  font-size: 14px;
  height: 55px;
  line-height: 21.4px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 121;
}
.topnavbar {
  display: block;
  font-size: 14px;
  line-height: 21.4px;
  margin-bottom: 0px;
  min-height: 55px;
  position: relative;
  width: 100%;
  z-index: 1050;
}
.nav-wrapper {
  box-sizing: content-box;
  display: block;
  position: absolute;
  font-size: 14px;
  line-height: 21.4px;
  padding-bottom: 0px;
  padding-top: 0px;
  z-index: 10;
  height: 55px;
  left: 68px;
  right: 0;
}
.topnavbar .nav {
  display: block;
  font-size: 14px;
  line-height: 21.4px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-top: 0px;
  padding-left: 0px;
  white-space: nowrap;
}
.navbar-nav > li {
  display: block;
  float: left;
  font-size: 14px;
  line-height: 21.4px;
  position: static;
  text-align: left;
}
.navbar-nav > li > a {
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: 55px;
  line-height: 21px;
  outline-style: none;
  outline-width: 0px;
  padding-bottom: 17px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 17px;
  position: relative;
  text-align: left;
  text-decoration: none;
}
aside {
  bottom: 0px;
  display: block;
  font-size: 14px;
  left: 0px;
  line-height: 21.4px;
  position: fixed;
  top: 55px;
  width: 68px;
  z-index: 119;
}
.aside-inner {
  display: block;
  font-size: 14px;
  line-height: 21.4px;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 68px;
  height: 100%;
}
.sidebar {
  display: block;
  font-size: 14px;
  line-height: 21.4px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 68px;
  height: 100%;
}
.nav {
  display: block;
  font-size: 14px;
  line-height: 21.4px;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
.sidebar > .nav > li {
  display: block;
  width: 68px;
}
.sidebar li > a {
  display: block;
  position: relative;
  padding: 20px 5px;
}
.sidebar > .nav > li > a > em {
  display: inline-block;
  font-size: 22.4px;
  height: auto;
  letter-spacing: 0.35px;
  line-height: 22.4px;
  text-align: center;
  width: auto;
}
.sidebar > .nav > li > .sidebar-subnav {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px;
  pointer-events: none;
}
.sidebar > .nav > li > .sidebar-subnav > li > a {
  padding: 10px;
}
.sidebar > .nav > li > .sidebar-subnav > li .center-block {
  height: auto;
}
.sidebar > .nav > li:hover > .sidebar-subnav {
  opacity: 1;
  pointer-events: all;
}
li > a > div {
  display: block;
  float: left;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.35px;
  line-height: 21.4px;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 60px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.center-block {
  display: block;
  font-size: 11.9px;
  font-weight: bold;
  height: 50px;
  letter-spacing: 0.35px;
  line-height: 18.19px;
  margin-left: 0px;
  margin-right: 0px;
}
.topnavbar .nav-wrapper {
  background-color: var(--top-bg);
  border-bottom: var(--border-thickness) solid var(--border);
}
aside > .aside-inner > .sidebar {
  width: 87px;
}
aside {
  box-sizing: content-box;
  background-color: var(--side-bg);
  border-right: var(--border-thickness) solid var(--border);
}
.navbar-nav li > a {
  color: var(--top-fg);
  background-color: var(--top-bg);
  transition-property: color, background-color;
  transition-duration: var(--hover-duration);
  transition-timing-function: ease;
}
aside > .aside-inner > .sidebar > .nav > li > a {
  color: var(--side-fg);
  background-color: var(--side-bg);
  transition-property: color, background-color;
  transition-duration: var(--hover-duration);
  transition-timing-function: ease;
}
.navbar-nav li:hover > a {
  color: var(--hover-top-fg);
  background-color: var(--hover-top-bg);
}
aside > .aside-inner > .sidebar > .nav > li:hover > a {
  color: var(--hover-side-fg);
  background-color: var(--hover-side-bg);
}
.navbar-nav li > a.active-module {
  color: var(--active-top-fg);
  background-color: var(--active-top-bg);
  transition-duration: var(--active-duration);
}
aside > .aside-inner > .sidebar > .nav > li.active > a {
  color: var(--active-side-fg);
  background-color: var(--active-side-bg);
  transition-duration: var(--active-duration);
}
.sidebar-subnav {
  border: var(--sub-border-thickness) solid var(--sub-border);
  transition: opacity var(--duration) ease;
}
.sidebar-subnav > li > a {
  color: var(--sub-fg);
  background-color: var(--sub-bg);
  transition-property: color, background-color;
  transition-duration: var(--hover-duration);
  transition-timing-function: ease;
}
.sidebar-subnav > li:hover > a {
  color: var(--hover-sub-fg);
  background-color: var(--hover-sub-bg);
}
.sidebar-subnav > li.active > a {
  color: var(--active-sub-fg);
  background-color: var(--active-sub-bg);
  transition-duration: var(--active-duration);
}
.navbar-nav .navbar-subnav {
  opacity: 0;
  width: 200px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.navbar-nav > li > .navbar-subnav > li > a {
  padding: 10px;
  display: block;
}
.navbar-nav > li:hover > .navbar-subnav {
  opacity: 1;
  pointer-events: all;
}
.navbar-subnav {
  border: var(--sub-border-thickness) solid var(--sub-border);
  transition: opacity var(--duration) ease;
}
.navbar-subnav > li {
  position: relative;
}
.navbar-subnav > li > a {
  color: var(--sub-fg);
  background-color: var(--sub-bg);
  transition-property: color, background-color;
  transition-duration: var(--hover-duration);
  transition-timing-function: ease;
}
.navbar-subnav > li:hover > a {
  color: var(--hover-sub-fg);
  background-color: var(--hover-sub-bg);
}
.navbar-subnav > li > a.active-module {
  color: var(--active-sub-fg);
  background-color: var(--active-sub-bg);
  transition-duration: var(--active-duration);
}
/* underline hover effect */

.navbar-nav li > a:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: var(--hover-line-top);
  transition: height var(--hover-line-duration) ease;
}
.sidebar-nav li > a:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  background-color: var(--hover-line-side);
  transition: width var(--hover-line-duration) ease;
}
.navbar-subnav > li > a:after {
  width: 0;
  height: auto;
  top: 0;
  left: 0;
  right: auto;
  background-color: var(--hover-line-sub);
  transition: width var(--hover-line-duration) ease;
}
.sidebar-subnav > li > a:after {
  background-color: var(--hover-line-sub);
  right: auto;
  left: 0;
}
.navbar-nav li > a.active-module:after {
  background-color: var(--hover-line-active-top);
}
.sidebar-nav li.active > a:after {
  background-color: var(--hover-line-active-side);
}
.navbar-nav > li:hover > a:after {
  height: var(--hover-line-thickness);
}
.navbar-subnav > li:hover > a:after,
.sidebar-nav li:hover > a:after {
  width: var(--hover-line-thickness);
}
.navbar-subnav > li.active > a:after,
.sidebar-subnav > li.active > a:after {
  background-color: var(--hover-line-active-sub);
}
.sidebar .nav > li.active > a > em,
.sidebar .nav > li.open > a > em {
  color: inherit;
}
:root {
  --edf-orange: #FE5815;
  --edf-light-orange: #FFA02F;
  --edf-green: #509E2F;
  --edf-light-green: #C4D600;
  --edf-blue: #005BBB;
  --edf-dark-blue: #001A70;
  --background: var(--edf-blue);
  --color: #FFFFFF;
  --border: var(--edf-orange);
  --border-thickness: 2px;
  --sub-border: var(--edf-dark-blue);
  --sub-border-thickness: 1px;
  --duration: 0.2s;
  --logo-bg: var(--background);
  --logo-fg: var(--color);
  --top-bg: var(--background);
  --top-fg: var(--color);
  --side-bg: var(--background);
  --side-fg: var(--color);
  --sub-bg: #777777;
  --sub-fg: var(--color);
  --active-top-bg: var(--edf-dark-blue);
  --active-top-fg: var(--top-fg);
  --active-side-bg: var(--edf-dark-blue);
  --active-side-fg: var(--side-fg);
  --active-sub-bg: var(--edf-dark-blue);
  --active-sub-fg: var(--sub-fg);
  --active-duration: var(--duration);
  --hover-top-bg: var(--top-bg);
  --hover-top-fg: var(--top-fg);
  --hover-side-bg: var(--side-bg);
  --hover-side-fg: var(--side-fg);
  --hover-sub-bg: #3B3B3B;
  --hover-sub-fg: var(--sub-fg);
  --hover-duration: var(--duration);
  --hover-line-thickness: 4px;
  --hover-line-top: var(--edf-orange);
  --hover-line-side: var(--edf-orange);
  --hover-line-sub: transparent;
  --hover-line-active-top: transparent;
  --hover-line-active-side: transparent;
  --hover-line-active-sub: transparent;
  --hover-line-duration: var(--duration);
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://thesabbir.github.io/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"/>
<header class="topnavbar-wrapper">
  <nav class="navbar topnavbar">
    <div class="nav-wrapper">
      <ul class="nav navbar-nav">
        <li>
          <a>
            <em></em> Portal
          </a>
          <ul class="nav navbar-subnav nav-floating">
            <li>
              <a>
                <em class="icon-home"></em> Dashboard
              </a>
            </li>
            <li>
              <a>
                <em class="fa fa-database"></em> Asset Management
              </a>
            </li>
            <li>
              <a>
                <em class="fa fa-users"></em> Broker
              </a>
            </li>
            <li>
              <a>
                <em class="fa fa-tasks"></em> Deal Flow
              </a>
            </li>
            <li>
              <a>
                <em class="fa fa-folder"></em> Documents
              </a>
            </li>
            <li>
              <a>
                <em class="fa fa-book"></em> ESP
              </a>
            </li>
            <li>
              <a>
                <em class="fa fa-tags"></em> Invoice
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a>
            <em></em> Retail
          </a>
          <ul class="nav navbar-subnav nav-floating">
            <li>
              <a>
                <em class="icon-layers"></em> Billing
              </a>
            </li>
            <li>
              <a>
                <em class="icon-globe"></em> Market Data
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a class="active-module">
            <em class="fa fa-refresh"></em> Mirror Trades
          </a>
        </li>
        <li>
          <a>
            <em class="fa fa-line-chart"></em> P&amp;L
          </a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<aside class="aside">
  <div class="aside-inner">
    <nav class="sidebar">
      <ul class="nav sidebar-nav">
        <li>
          <a>
            <div class="text-center">
              <em class="fa fa-random"></em>
            </div>
            <small class="center-block text-center">Swaps</small>
          </a>
        </li>
        <li>
          <a>
            <div class="text-center">
              <em class="fa fa-bullseye"></em>
            </div>
            <small class="center-block text-center">Physicals</small>
          </a>
        </li>
        <li>
          <a>
            <div class="text-center">
              <em class="fa fa-link"></em>
            </div>
            <small class="center-block text-center">Link Trades</small>
          </a>
        </li>
        <li class="active">
          <a>
            <div class="text-center">
              <em class="icon-layers"></em>
            </div>
            <small class="center-block text-center">Reports</small>
          </a>
          <ul class="nav sidebar-subnav nav-floating" style="top: 270px;">
            <li>
              <a class="center-block">
                <small class="center-block text-left">Api Error Report</small>
              </a>
            </li>
            <li>
              <a class="center-block">
                <small class="center-block text-left">Unsupported Trades Report</small>
              </a>
            </li>
            <li>
              <a class="center-block">
                <small class="center-block text-left">Physical Trade Discrepancy Report</small>
              </a>
            </li>
            <li class="active">
              <a class="center-block">
                <small class="center-block text-left">Swap Trade Discrepancy Report</small>
              </a>
            </li>
            <li>
              <a class="center-block">
                <small class="center-block text-left">Physical Trade Tie-out Report</small>
              </a>
            </li>
            <li>
              <a class="center-block">
                <small class="center-block text-left">Swap Trade Tie-out Report</small>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a>
            <div class="text-center">
              <em class="fa fa-exchange"></em>
            </div>
            <small class="center-block text-center">Sleeve Trades</small>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</aside>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我看不到闪烁，但我遇到了同样的问题。添加背面可见性：隐藏！重要; 或转换：translateZ（0）比例（1,1）！重要; 为我工作。

相关问题
最新问题