html - Google Chrome flickering visibility state of 2 objects -
in project have 2 headers setup, 1 mobile devices , 1 non-mobile devices.
now in google chrome have flickering of these headers when rendering page, in other browsers don't have issue.
so clear, @ first set both headers as:
#main-header, #fixed-header { opacity: 0; display: none; visibility: hidden; }
and using js script do:
/* stuff mobile devices eg <= 1024px width */ if (is_mobile_device()) { $mainheader.removeclass('open'); $fixedheader.addclass('open'); } else { $mainheader.addclass('open'); $fixedheader.removeclass('open'); }
where .open
class contains:
#main-header.open, #fixed-header.open { display: block; visibility: visible; opacity: 1; }
if manually set .main-header
open default, nice on non-mobile devices , have flickering on mobile devices.
<header id="main-header" class="open"> </header>
any idea how can resolve this?
Comments
Post a Comment