â–Ľ
Streaming live at 10am (PST)

Jumping About Navigation onLoad in Safari not Chrome

Design help General
#1

Hello Team,

I have a strange anomaly in my navigation. When the fonts load they jump about.

http://www.forte-arts.co.uk - when the page loads one of the navigation items jumps about from left to right.

The Webflow team said its to do with the custom fonts, I Have uploaded the entire font group but its not made any difference.

Any advice?

Robbie

Here is my public share link: LINK
(how to access public share link)

#2

HI @laveritalondon, one thing that will help with the font fallback issue is to paste the following css into the head of the site:

<style> 
.wf-loading * {
 
    /*
    first things first, we need to hide everything,
    but bear in mind that this will only take effect
    once the loading script has taken effect.
    here we're hiding all content within
    the <html> once it has the class "wf-loading"
    */
    opacity: 0;
}
</style>

The site should be published for the styling to be shown, so that the font fallback is not shown momentarily before the google font is rendered.

Also, on the navigation, could you help to share the read-only link to the site in question? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link.

Thanks in advance!

2 Likes
#3

I think this is the read only link. https://preview.webflow.com/preview/hoben-design?preview=4fd38e470eeac6adc18a6daf5ead76ac

#4

for some reason the dropdown link jumps about when it loads in safari. I think its how I have created the navigation. I need to learn how to use the flex box setting better. :frowning:

#5

I have the same problem, I think? My site: http://www.socialinkluderingblekinge.se

The letters in the navigation menu scrambles up i a heap to the right, and moves quickly out to normal position again. Can’t see why. I use Safari on Mac OS. Heres a quick screen dump taken during the shift:

Skjermbilde 2016-09-29 kl. 14.42.34.png1539Ă—1139 647 KB
. Have not used special font other that whats already provided in the list.

#6

Yes Morten, I notice its very strange. I wonder if its the container? What
kind of container are you using? it works perfectly in Google Chrome.

#7

Here is my share link so you can see what I have done with mine. https://preview.webflow.com/preview/hoben-design?preview=4fd38e470eeac6adc18a6daf5ead76ac

#8

I did a little screen capture of how the navigation behaves - https://cl.ly/3I442h0H3l43

#9

I have a normal (?) Navigationcontainer, which limits the logo and the menu placement to the “column width” of the page. The navigation bar (as I have called it) is similar to your wrapper as far as I can see.
Here’s a share link to my site: https://preview.webflow.com/preview/social-inkludering-blekinge?preview=c74392d9d834ade0ea90f8b95c7055b0

#10

Hi @cyberdave any thoughts on why this may be jumping around on both of our navs in Safari?

#11

Hi @laveritalondon, one thing to check is that if you are using any transition styles, is to make sure you do not select to affect all style properties with the transition, just the style having the change.

I checked from https://preview.webflow.com/preview/social-inkludering-blekinge?preview=c74392d9d834ade0ea90f8b95c7055b0, but that read only link does not appear to be active still, could you please reshare the link?

Thanks in advance.

Regards,
Dave

1 Like
#12

Hello @cyberdave here you go https://preview.webflow.com/preview/forte-arts-site?preview=3a3af217cf9bd469e84b5dd4bf2a89cc

#13

I also didnt understand a word of your first sentence sorry @cyberdave :cry:

#14

Hi, @laveritalondon take a look :slight_smile: https://cl.ly/383b283e322e

1 Like
#15

You are a legend! Thank you @cyberdave that was brilliant!

1 Like
#16

Solution from Dave above.

1 Like
#17

Thanks a lot: It helped me too. I did not have transitions on the All links level, but on the first one. Deleted all transitions and then it worked fine!! Thanks @cyberdave !

1 Like
#18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.