Bootstrap fixed navbar issue

[lfuelling]

Hi Hakim,

I found an issue with Bootstraps fixed navbar. Let's assume you have the following structure:

<div class="kontext">
  <div class="layer one show">
    <nav class="navbar navbar-default fixed" role="navigation">
      ...
    </nav>
  </div>
  <div class="layer two">
    ...
  </div>
</div

When using Kontext like this, the Navbar is fixed to top but won't scroll along with the page. It just stays at the top.

I found a solution for this though, you just need to comment out the following CSS:

.kontext.capable {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.kontext.capable .layer {
    -webkit-transform: translateZ( -100px );
       -moz-transform: translateZ( -100px );
            transform: translateZ( -100px );
}

.kontext.capable .layer.show {
    -webkit-transform: translateZ( 0px );
       -moz-transform: translateZ( 0px );
            transform: translateZ( 0px );
}

I have no idea why the above code makes Bootstraps navbar behave like this. Hope you can help me with this.

EDIT: I've found a better solution by just overwriting those properties like this:

.kontext.capable {
  perspective: none;
  transform-style: flat;
}

.kontext.capable .layer { transform: none; }

.kontext.capable .layer.show { transform: none; }

This solves the navbar behavior before calling k.next(). After calling it the navbar is again fixed to the top of the page (not the top of the viewport like expected)

[lfuelling]

Alright, I found the solution. If you apply position: fixed; to childs of transformed/animated elements, the fixed element will be fixed to the parent element instead to the viewport.

source: https://code.google.com/p/chromium/issues/detail?id=20574

The solution I found is to remove the animation and transition from the layer containing the navbar.