How to remove flicker caused by transition

Question

When I mouseover the two dropdown lis repeatedly, Portal and Retail, there is a flicker in the entire ul.nav.navbar-nav. In case this is a browser-specific issue, I am using Chrome 51 on Windows 7. I think it's related to the transition effect for displaying the ul.nav.navbar-subnav but I can't seem to isolate the problem. It didn't start happening until after I added the submenus to the top header. Below is a demo of the flickering problem, and compare it to this version which has no flicker.

Update Actually, I just noticed the flicker is also happening in the aside. If I change the --duration to 0, it removes the flicker. New question: is there a way to keep the opacity transition and still remove the flickering?

@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);
}

<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>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Jun 16 '16 at 14:08
I see no flicker in Firefox, but it would help if you could produce a fiddle detailing JUST the parts the are causing you the issues, as there's a lot to look at on the linked code — Martin, Jun 16 '16 at 14:12
@Martin the flicker is particularly noticeable in the text "Mirror Trades", but I've noticed that the text for all the navigation options flicker whenever the submenu for "Portal" and "Retail" transitions. — Patrick Roberts, Jun 16 '16 at 14:14
I will update to include a stack snippet with just the issue, hold on — Patrick Roberts, Jun 16 '16 at 14:14
Well for your information, I see none of the flicker you are describing on Firefox..... so the issue will be more to do with how Chrome handles graphical transitions in CSS. Rather than a general CSS issue. — Martin, Jun 16 '16 at 14:16
I've included a stack snippet with only the relevant HTML and CSS. I think it might be a chrome-specific problem but the answer below, when applied to the `html` selector, completely fixed the issue. — Patrick Roberts, Jun 16 '16 at 14:33

score 2 · Accepted Answer · answered Jun 16 '16 at 14:19

2

I can't see the flicker but I have had the same problem. Adding a backface-visibility: hidden !important; or transform: translateZ(0) scale(1,1)!important; worked for me.

answered Jun 16 '16 at 14:19

JamalDols

471
1
4
15

That's incredible! Is that a trick to invoke GPU rendering? How does that fix it? – Patrick Roberts Jun 16 '16 at 14:30

score 0 · Answer 2 · answered Feb 18 '22 at 23:18

0

Just incase anyone else stumbles across this, another factor is when using the will-change property, example will-change: transform, opacity will sometimes cause flickers.

answered Feb 18 '22 at 23:18

Brad Vanderbush

173
1
13

How to remove flicker caused by transition

2 Answers2