How to remove flicker caused by transition - css

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

Answer 1

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.

Answer 2

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.