Fixed positioned header "jumps" in Google Chrome

Question

http://fundamentaldesigns.us/normal/

I'm developing a site and I ran into a problem I've never had before. I have a header that has fixed positioning and a high z-index. The sections below it have relative positioning so that I can position elements inside them absolutely.

The header "jumps" around when scrolling in chrome. I figured out that if I remove the z-index it fixes the jumping problem but then it doesn't show in front of the other elements. Whats the trick here?

HTML

    <header>
    <div class="inner">
        <img src="images/logo.png" alt="Normal Public Library Foundation" class="logo">
        <nav>
            <ul>
                <li><a href="#whatif">Home</a></li>
                <li><a href="#">2014 Goals</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Donate</a></li>
            </ul>
        </nav>
    </div>
</header>

<div class="whatif section" id="whatif">
    <div class="inner">
        <h1>What if there was no library?</h1>
        <a href="#circulation" class="animated bounce"><img src="images/scroll-arrow.png" alt=""></a>
    </div>
</div>

CSS

header {
position: fixed;
top:0;
width: 100%;
padding: 20px 0;
background-color: #FFF;
opacity: 0.9;
z-index: 999;


-webkit-box-shadow: 0px 1px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 1px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 1px 7px 0px rgba(50, 50, 50, 0.75);

.logo {
    float: left;
}

nav {

    float: right;
    margin:8.5px 0;

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
            display:inline;
            font-size: 14px;
            line-height: 20px;
            padding: 0 30px;
            text-transform: uppercase;
        }
    }

}

}

 .section {
height: 800px;
position: relative;

.next {
    position:absolute;
    bottom: 75px;
    left:50%;
    color: #f5f2dc;
    padding: 5px 12px;
    border-radius: 3px;
    background-color: #454545;
    opacity: .5;
    margin-left: -28px;

    &:hover {
        background-color: #565656;
        color: #FFF;
    }
}

 }

Answer 1

This type of issue in Chrome is generally mitigated by adding the following CSS declaration on the fixed element.

-webkit-transform: translateZ(0);

This trick invokes hardware acceleration and improves performance.

Answer 2

I don't know why or how this works, but I did what Marcel added, and that did not fix my issue.

So I ignored it and went to my next problem of user zooming and added this meta tag:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Once I added that, I didn't have that problem anymore.