1

Our nav bar images jump around on page refreshes, and we have no clue how to fix it. It only seems to occur when the page refreshes, suggesting that it's somehow related to the loading of our sprite (which contains all the images for the nav bar links)?

We have tried playing with different float values, rearranging our element layout, and many different alternatives. We still cannot get rid of the jumping. The other thing we have isolated is that the jumping is tied to the length of the text in the nav bar links, meaning that if we shorten the text labels under each image, the jumping is minimized.

This happens on iPads and also on Chrome on Windows 7 Home Premium and OS X 10.7.5.

Here's the HTML for the nav bar:

<div id="header">               
        <div class="main">
            <a class="logo" href="/"><img class="" src="/images/web/logos/text_small.png" alt="Domain Name Registration and Search"></a>
            <div class="nav_bar">
                <a class="games icon_rise" href="/itunes-store/apps/free-apps/category/all-games?itunes-store-id=888-6014">
                    <div class="icon"></div>
                    <div class="label click_drop">Games</div>
                </a>
                <a class="education icon_rise" href="/itunes-store/apps/free-apps/category/education?itunes-store-id=6017">
                    <div class="icon"></div>
                    <div class="label click_drop">Education</div>
                </a>
                <a class="entertainment icon_rise" href="/itunes-store/apps/free-apps/category/entertainment?itunes-store-id=6016">
                    <div class="icon"></div>
                    <div class="label click_drop">Entertainment</div>
                </a>
                <a class="lifestyle icon_rise" href="/itunes-store/apps/free-apps/category/lifestyle?itunes-store-id=6012">
                    <div class="icon"></div>
                    <div class="label click_drop">Lifestyle</div>
                </a>
                <a class="music icon_rise" href="/itunes-store/apps/free-apps/category/music?itunes-store-id=6011">
                    <div class="icon"></div>
                    <div class="label click_drop">Music</div>
                </a>
                <a class="utilities icon_rise" href="/itunes-store/apps/free-apps/category/utilities?itunes-store-id=6002">
                    <div class="icon"></div>
                    <div class="label click_drop">Utilities</div>
                </a>
                <a class="all_apps icon_rise" href="/itunes-store/apps/free-apps/all">
                    <div class="icon"></div>
                    <div class="label click_drop">All Apps</div>
                </a>
            </div>
        </div>
    </div>

Here's the CSS:

#header { text-align:left; height:75px; background:url(/images/web/header_slice.png) repeat-x; }
#header .logo { position:relative; top:15px; width:106px; display:inline-block; }
#header .logo img { width:106px; height:35px; }

#header .nav_bar { width:720px; float:right; display:inline-block; position:relative; top:12px; text-align:right }
#header .nav_bar a { display:inline-block; margin-left:30px; max-width:100px; }

#header .nav_bar .icon { width:25px; height:25px; background:url(/images/web/nav_bar_icons.png) no-repeat; background-size:295px 70px; margin:auto; }
#header .nav_bar .games .icon { background-position:-45px 0 }
#header .nav_bar .education .icon { background-position:-90px 0 }
#header .nav_bar .entertainment .icon { background-position:-135px 0 }
#header .nav_bar .lifestyle .icon { background-position:-180px 0 }
#header .nav_bar .music .icon { background-position:-225px 0 }
#header .nav_bar .utilities .icon { background-position:-270px 0 }

#header .nav_bar .label { color:#00435d; font-size:15px; font-weight:bold; text-align:center; }
#header .nav_bar a:hover { text-decoration:none }

To reproduce:

1) Visit www.tekiki.com. The first time you visit, the nav bar links at the top will jump.

2) To reproduce the error, hit Shift-F5.

3) Attached is a screen shot of the nav bar links jumping.

enter image description here

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • 1
    It seems just fine in chrome ( on Mac ). – Vucko Oct 23 '13 at 07:26
  • its working fine firefox also.. its just taking time to load complete css... thats not a big issue i think... – Manjunath Hegde Oct 23 '13 at 07:30
  • It's fine in all browser. I think this question for advertisement of his site. – KarSho Oct 23 '13 at 07:35
  • No, sorry, this is not an advertisement. SO users don't want our site. We have seen the error on iPads and Chrome on a Windows 7 Home Premium machine. Did you try hitting Shift-F5 to reload the page? – Crashalot Oct 23 '13 at 07:35
  • 1
    I don't see anything jumping - but i suggest you start by fixing your HTML errors, http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tekiki.com%2F – CBroe Oct 23 '13 at 07:41
  • We also can reproduce it reliably on Chrome on OS X 10.7.5. – Crashalot Oct 23 '13 at 18:31

3 Answers3

1

This is due to font rendering on page load.

During page load, the 'Signika' font loads - overriding any fonts before it.

body, p, ol, ul, td {
  font-family:'Signika', verdana, tahoma, arial, sans-serif;
}

Obviously, various aspects of the font/element change with a different font type/family. This font in particular, Signika, appears a lot larger than the fallback font Verdana.

Disable the 'Signika' font, so the fallback font is in action:

font-family:verdana, tahoma, arial, sans-serif;

You will see that 'jumping' nav appears (I see this in Chrome).

With the 'Signika' font in place, you can reduce the font size and/or surrounding margin and paddings to prevent this from happening.

Tony Barnes
  • 2,625
  • 1
  • 18
  • 29
0

enter image description here enter image description here i did this using fire bug see the changes hope it could help..

Manjunath Hegde
  • 404
  • 4
  • 21
0

The font-family you have loading called Signika is what causes the menu to jump.

If you want to keep the font-family and remove the jump then simply remove the width: 720px on #header .nav_bar. It is not required since it is floated, and the menu won't "jump".

Of course, because you are using a font that isn't available on a users computer the text will still change only as fast as the user downloads the font, but at least by removing the width property on the nav_bar you simply make it "slide" to the right.

Hope this helps.

Nahydrin
  • 13,197
  • 12
  • 59
  • 101
  • cool, thanks. but since we're loading the font in the , doesn't this mean the font is downloaded before page rendering occurs? also isn't giving a width required when using floats? – Crashalot Oct 25 '13 at 22:37
  • No and no. The font starts downloading but isn't necessarily downloaded before the page loads, that's up to a users connection speed. Width is definitely not required when using floats. [See this question](http://stackoverflow.com/questions/4712242/wait-for-fonts-to-load-before-rendering-web-page?rq=1) – Nahydrin Oct 25 '13 at 22:44
  • cool, thanks! so i guess there is no way to use a custom font and guarantee no jumping? – Crashalot Oct 25 '13 at 22:50
  • Nope, as the browsers decide how this behaves, it's just in your best interest to "hide" the jumping effect as something else. As you pointed out, it only appears on first page load, so if you can use the slide method (as I outlined), or just remove the custom font, those are your best options. – Nahydrin Oct 25 '13 at 22:52
  • thanks, brian. SO won't let us award the bounty yet. sorry about that. :( is there a way to get notified when the font loads? one option to consider is "sliding in" the nav bar only after font loading? – Crashalot Oct 25 '13 at 22:57
  • By removing the width, so that all elements (by default) fit on the same line, the default effect would be "sliding in", once the font loads. There might be a way to know if the fonts loaded using javascript, but you don't need to if you intend to have them slide/resize only when the font loads, because it only happens when it loads. – Nahydrin Oct 25 '13 at 22:58
  • we removed the width, but the problem with using signika remains, that is the icon images still jump a bit as you predicted -- definitely not as smooth as a true sliding animation. – Crashalot Oct 25 '13 at 23:10
  • You may be able to minimise the jump by declaring a height and overflow:hidden; – Tony Barnes Oct 26 '13 at 07:09
  • @TonyBarnes, thanks for the comment. why would a height help since what's changing more noticeably is the width of the elements (see the screen shot)? – Crashalot Oct 26 '13 at 21:40
  • 1
    @Crashalot Adding a height/overflow would help to prevent the last icon from appearing below the other icons (which is affected by the width). – Tony Barnes Oct 27 '13 at 11:40
  • Set a width and height for the menu item's so that when the font changes, it doesn't slide at all. – Nahydrin Oct 27 '13 at 21:17