NAV misplaced on Chrome only on the first load

I encounter a little problem with the header of my website on Google Chrome. The first time the webpage is loaded, the navigation bar is misplaced, but then if I refresh the page, the navigation bar is well-placed. I don't get why this bug keeps occuring to me and friends who use Google Chrome.

This is how it appears on the first load of the page (misplaced) :

And this is how it looks after refreshing the page (well-placed) :

Now this is the HTML description of the header :

<header>
    <div id="head1">
        <h1>Léo Dupont</h1>

        <nav>
            <ul>
                <li><a href="#">E1</a></li>
                <li><a href="#">E2</a></li>
                <li><a href="#">E3</a></li>
                <li><a href="#">E4</a></li>
                <li><a href="#">E5</a></li>
            </ul>
        </nav>
    </div>

    <h2>ESIEE Paris - Deuxième année</h2>
</header>

And this is the CSS part :

@import url(http://fonts.googleapis.com/css?family=Tangerine:700);

body {
    margin:0;
}

/* HEADER */
header, header h1, header h2 {
    color:white;
    margin:0;
}

/* HEADER : high */
header #head1 {
    height:80px;
    background-color:#006400;
}
header h1 {
    display:inline-block;
    height:100%;
    vertical-align:top;
    font-family:'Tangerine', cursive;
    font-size:100px;
}

/* HEADER : low */
header h2 {
    text-align:center;
    background-color:#008000;
    height:40px;
    line-height:40px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:normal;
}

/* HEADER : NAVIGATION */
header nav {
    display:inline-block;
    position:absolute;
        right:0px;
    vertical-align:middle;
}
header nav ul {
    list-style-type:none;
}
header nav li {
    display:inline-block;
    margin-right:30px;
    width:55px;
    height:55px;
    background:white;
    border-radius:50%;
    border:none;
    color:#fff;
}
header nav li a {
    position: relative;
        top: 18px;
        left: 16px;
    font:bold 14pt Arial;
    text-decoration:none;
    color:black;
}

Does someone have an idea of how I could fix this ?

Answers


I made a jsfiddle containing your code:

http://jsfiddle.net/rfm4u/

Please do this when asking these sorts of questions - it makes it easier to help.

I can't explain why you're sometimes seeing one behavior vs the other. I think the inconsistency may very well be an issue with Chrome's rendering engine. I inspected the <nav> element in Chrome's dev tools and flipped the display: inline-block; property on and off. When I flipped it off, I saw the nav menu jump to the bottom in exactly the way you had it in the first screenshot, but the weird thing is, after setting it back to on, it didn't jump back - it just stayed there. Toggling the property afterward didn't do anything.

However, I see how you're currently positioning the <nav> element and noticed that you're not really actually controlling its vertical position. You might think the vertical-align: middle bit is controlling it, but since you're using absolute positioning on it, you've taken that <nav> element out of normal document flow, so you're not actually vertically centering it relative to the <div id="head1"> like you might think. The vertical-align property is confusing: you may want to take a look at this.

There are a couple possible fixes - pick the one you like best.

Approach 1: Explicitly set the vertical position

Just add a top: 5px; (or whatever value you prefer) on the header nav style. Now you're explicitly controlling the position, instead of leaving it up to chance (or the browser's quirky rendering engine).

What you lose is the vertical centering, which, judging from the code, is something you wanted. With this approach, if you ever change the height on your <div id="head1">, you would need to manually tweak the nav positioning as well.

Approach 2: Use the absolute vertical centering technique

There is a trick you can use to vertically center content regardless of the container's size. There's a good in-depth article on it here:

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

In your case, this will require a minor tweak since you don't actually want to center the <nav> horizontally relative to the <div id="head1"> - you want it to stay to the right, so you would just need to leave off the left: 0; part.

Here's what you need to do to apply this technique.

  1. Set the position: relative; property on the header #head1 style. This is required because you want to vertically center the <nav> relative to the <div id="head1">, not <body>. In case you aren't aware of how relative position works, all you need to remember is:

An element with relative positioning gives you the control to absolutely position children elements inside of it

  1. Declare an explicit height on the header nav using something like height: 87px;. This is required for the aforementioned trick to work (though there are some ways around it mentioned in the article above).

  2. Set the top, bottom, and right properties to 0 on the header nav (note we're leaving out left: 0 to avoid centering it horizontally), and also set the margin: auto; property, as described in the technique.

Here's a fiddle demonstrating the result:

http://jsfiddle.net/ajfUK/2/

You can try changing the height on the #head1 element in Chrome's dev tools, and observe that the <nav> stays vertically centered.


Need Your Help

Rangy commonAncestorContainer wrong when using anchor without href

angularjs dom range rangy

I'm using Rangy in conjunction with AngularJS. Angular replaces href with ng-click, so calling a function becomes: