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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -