-2
liを2回ドロップダウンしてポータルとリテールを繰り返すと、全体にフリッカーがあります。これはブラウザ固有の問題の場合は、Windows 7でChrome 51を使用しています。ul.nav.navbar-subnavを表示するためのトランジション効果と関連していると思いますが、問題を特定できないようです。私はトップヘッダーにサブメニューを追加するまで起きていませんでした。以下は、ちらつきの問題のデモです。フリッカーのないthis versionと比較してください。トランジションによって引き起こされるフリッカーを削除する方法
更新実際には、asideでもちらつきが発生しています。 --durationを0に変更すると、フリッカーが削除されます。新しい質問：opacityを維持して、ちらつきを取り除く方法はありますか？私はちらつきを見ることはできませんが、私は同じ問題があった
@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>
助けを求める質問には、質問そのもの**にそれを再現するのに必要な最短のコードを含める必要があります**。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –
Firefoxでちらつきは見えませんが、フィーリングを細かく作成することができれば、リンクされたコードを見るために多くの部分があるので、問題の原因となっている部分だけを詳しく調べるのに役立ちます – Martin
*正確に*点滅しますか？ – Martin