Streaming live at 10am (PST)

Nav links keeps wiggling when clicking on them


#1

Hello all,

Iv’e had this issue with different projects I was working on and couldn’t find a solution.

I gave the Nav Links a class in order to have my desired font, since I changed the font style, the Nav Links will start wiggling when clicking on them to go to another page.

When I change back the font to the original Arial style it will stop wiggling.

I tried giving a class to the body and select the font I like but still didn’t solve it

Any suggestion?


Here is my site Read-Only:
https://preview.webflow.com/preview/duvshany?utm_source=duvshany&preview=39446a8cbea4c647b51420f44dcbd4c6

Here is a published link:
http://duvshany.webflow.io/


#2

Hi @Eli11,

Thank you so much for getting in touch about your wiggling font, as this definitely sounds like odd behavior.

I tried reproducing this behavior on my end but was unable to as you may note in the following short screencapture: https://cl.ly/5c241f00f97c

Can you please try the following:

(1) Try to reproduce the error while using Incognito mode with browser extensions turned off: https://support.google.com/chrome/answer/95464?hl=en

(2) If the problem persists, please take a screenshot of your Console and send it to me: https://cl.ly/2Q2l1g0B3v0s

Also, could you please let me know what browser version you’re using by sending me your information from this page? https://www.whatismybrowser.com/

There should be a small share link when you visit the page which you can send to me.

Thanks in advance, and I’ll be standing by to test for you.

Kind regards,
Micah


#3

Thanks Micah

I will try to reproduce and see if it happens again.

My browser version is:
Chrome 70 on macOS (Mojave)


#4

So I managed to reproduce the issue.

The Nav Links will wiggle (when clicking to change page) if I change their font style. Either when I select a font style to the Nav Link class or to the Body.

This will happen with most font style from the default options in the designer panel.
It will not happen if I leave the default Arial font style. Strangely, also with specific font style, like Exo, George, and Impact this will not happen. The rest fonts, if I select them to the Nav Link, The Nav Link will start wiggling when publishing the site

It looks like you set Arial font to the nav, this issue happens with other font style.


Here is the reproduced site

Published:
http://nav-fix.webflow.io/

Read-Only:
https://preview.webflow.com/preview/nav-fix?utm_source=nav-fix&preview=7ca789d9977c76a51bac192fe7f62c40


#5

Hi @Eli11,

Thank you for the additional project, as it was very helpful.

What you’re experiencing is called Flash of Unstyled Text (FOUT), and can be fixed by adding the following to the Head of your project:

<style> .wf-loading * { opacity: 0; } </style>

The following short screencapture provides some insight: https://cl.ly/186dbc716df3

You can view the original response at

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.


#6

Thanks Micah.

This custom code helps the font should not wiggle but it adds a flicker effect to the whole page.

I’ll attach screen shots of the different stages.

Here is the site when using the default Arial font with no custom code. See how smooth it transitions between pages.
CloudApp

Here is when I change the font style. It start wiggling when changing tabs.
CloudApp

And here is when I add the custom code. the entire page transition if flickering.
CloudApp

Is there a way to avoid this flickering and still be able to have a different font style than Arial?
Thanks again for supporting


#7

Hi @Eli11,

Glad I could help.

:nerd_face: Great additional question, and this is a product of our browsers as noted in the following article: https://css-tricks.com/fout-foit-foft/

A workaround to the abrupt load is to add a transition, and you can view this transition implemented at the following URL: http://nav-fix-font.webflow.io/

The custom code used as follows:
<style>
html { opacity: 0; transition: opacity 600ms ease-out; }
html.webflow-loaded { opacity: 1; }
</style>
<script>
var Webflow = Webflow || ;
Webflow.push(function() { $(‘html’).addClass(‘webflow-loaded’) });
</script>

This workaround is noted in the following forum post:


#8

Finally I was able to point out when exactly this is happening. Or better said, NOT happening!
When I choose a font style from the default options in the designer, or when I add a font style from the Google fonts in the Settings page > Fonts. It will mostly wiggle! (besides very few default font styles, as mentioned above).

It will not happen when I upload the font from my library.
Easy way is to browse Google fonts for the desired font. Download them and then upload to the project. Problem solved!

:slight_smile: