desktop menu flickering/fashing before responive menu shows on mobile

[onehour]

Hello:

I am developing a site using Magazine Pro. On a mobile device, the regular navigation menus (desktop) flash/flicker before the mobile (hamburger) menu appears. I have a gif of this to demonstrate here: https://imgur.com/a/Ctl3b

I know this is somehow controlled by jquery, but I am not a developer or a coder. I have several sites on StudioPress themes, that all seem to do this in a varying capacity, so it seems to inherit in these themes. I have fast hosting (Pressidium) and a few scripts on these sites -- but I try to keep things lean.

The flickering gives a really BAD mobile experience. The theme seems to have a lag time when it's figuring out what navigation menu (regular vs. mobile) to call up for the screen size.

Is there a way to stop this flickering?

[lifanovsky]

Same on my site. But only in mobile Chrome. In mobile Safari everything seems to be ok.

[spektrumede]

I would really need to see the site to say for certain, but I had the same problem on my site spektrume.de too, using the Infinity Pro Theme. It's not a very clean solution, but what worked for me was:

1. Adding this code to the scripts before header:

  <script type="text/javascript">
    jQuery('html').attr('id', 'hidden');
   jQuery(window).on('load', function () {  
      jQuery('html').attr('id', '');  
     });  
   </script>

2. Adding CSS:

html#hidden{
display: none;
}

This code hides the website until it has loaded. It would be better to do this with a class, rather than ID, but that doesn't work as it gets overwritten by the "js" class.

If anyone knows how to do this more cleanly, I'd be very interested!

[Author]

Posts