Navigation Disappearing in Chrome after scrolling and clicking

Question

I am working on a small website for an Android App I'm releasing, but I have a small problem that I can't seem to find the answer to.

In Firefox, everything works properly but when you scroll and then click on a nav link (simply using an id to move down the page) but on Chrome, the navigation disappears until you scroll some more.

The website is up at www.ioudebtcalculator.com

These are the only styles I have applied:

#navBar {
    background-color:#000;
    position:fixed;
    width:100%;
    font-family:sans-serif;
    font-weight:bold;
    font-size:13pt;
    height:70px;
}

Edit: I have since removed the position fixed from the navBar on the website so you will no longer see the problem there. The problem has not yet been solved.

You can easily add position fixed to the navBar element using Developer Tools or any other equivalent tool to see the problem.

Answer 1

it works for me when adding this to your navbar css

-webkit-transform: translateZ(0);

making it

#navBar {
    background-color: #000;
    width: 100%;
    position: fixed;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14pt;
    height: 70px;
    -webkit-transform: translateZ(0);
    z-index: 1;
    box-shadow: 0 2.5px 20px #000;
}

Answer 2

It might be benefitial to use a scroll:

This will make it more userfriendly because it's gracefull and the problem (I imagine) is in the fact that Chrome doesn't register the position change because of the current method.

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });