Minimal-mistakes: Desktop: "menu icon" is flickering, nav items are jittering every time page loads

[Sciss]

• [ ] This is a question about using the theme.
• [ ] This is a feature request.
• [X] I believe this to be a bug with the theme.
  
  
  
  • [ ] I have updated all gems with bundle update.
  
  
  • [ ] I have tested locally with bundle exec jekyll build.
  
  

---

Environment informations

• Minimal Mistakes version: 4.9.0
• Jekyll version: 3.6.2
• GitHub Pages hosted: no
• Operating system: Debian 9

---

I find the menu behaviour not good on desktop. It seems the (to be honest, rather clunky and large looking) popup-icon is _always_ rendered at first, before then being removed if the space is large enough for the nav items. The effect is an annoying flickering and a horizontal jitter of the nav items. This is in Firefox ESR 52 and Chromium 64. I use the addition (as shown in the docs) of Google fonts css as in the original MM. See attached video.

Screencast from 08-01-18 18:45:39.zip

[mmistakes]

What version of the theme are you using? Note above says 1.3.3 but I seriously doubt that since that's ancient.

I've noticed some flickering too every since updating to Font Awesome 5. I'm pretty sure there's some "flash of unstyled content" going on while all the scripts load, which is why things appear to jump.

[Sciss]

Yes, sorry, I don't know where I got that from; I double-checked, and also merged all upstream, so it's still in 4.9.0

[Sciss]

Is there a switch or flag to completely disable the popup menu on desktop? I would actually prefer that.

[mmistakes]

Nope.

[mmistakes]

More than likely the issue is search related. As noted in the docs if you have a big site the search JSON file that has to load will be big, and that could be impacting things.

Try disabling global search first by search: false in your _config.yml

[Sciss]

No, it's still there even when search is disabled.

[mmistakes]

:man_shrugging:

I tried a bunch of things and not really sure what's causing it. Could be something that was always there it's just more noticeable now. Things are going to jump because the JavaScript needs time to load and run as it determines the width of the masthead, then it moves links that don't fit into the dropdown.

I tried to speed things up and prioritize it so it's not as noticeable, but nothing much matter:

• Disabled the Font Awesome 5 script
• Pulled out the Greedy nav script out of main.min.js and moved to the head
• Disabled search scripts

If anyone has another idea or suggestion I'm all ears.

[Sciss]

Perhaps using left justification instead of centering would alleviate it a bit?

[coliff]

@Sciss - have you tried adding a bit of custom CSS like;

.greedy-nav__toggle {display:none! important}

You could add it as an inline style in the head so the icon will never show.

[donaldboulton]

Change font awesome to .all CSS and flickering will stop by not using .all .js and save about 630+ kb
Better if you host the .all CSS and font files locally

[Sciss]

@coliff that hides the menu forever, so menu items become inaccessible when the window is too narrow

This hack solves part of it:

diff --git a/_includes/masthead.html b/_includes/masthead.html
index 85dd462..29e9eea 100644
--- a/_includes/masthead.html
+++ b/_includes/masthead.html
@@ -22,7 +22,7 @@
           </svg>
         </button>
         {% endif %}
-        <button class="greedy-nav__toggle" type="button">
+        <button class="greedy-nav__toggle hidden" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</span>
           <div class="navicon"></div>
         </button>

So that the menu button is initially hidden. The flicker comes back when the menu is needed, butg at least it alleviates the problem. A better solution is probably to allocate a fixed size for the menu button.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.