Weird webkit issue with position: fixed

Question

http://workshop.wpcoder.com/daniel/tvexperts/

In Chrome, if you click "Production" and then "Contact" the position: fixed header disappears, but comes back when you move the scrollwheel. I have no idea what the cause is, and so far I can only detect it in Safari and Chrome, but Firefox is fine so I think it is a webkit bug.

Answer 1

Actually if you watch it close, in Firefox also has the same bug. The difference is that in there it show less content from the previous link. Perhaps your problem can be solved defining, in CSS, a min-height value for the divs of the links.

div#contact {
min-height:700px;
height:auto
}

After a local test I saw the real problem :). I've created a correction.css and tested in Opera 11, Safari 5, Firefox, 3.6, Firefox 4.0 beta 11 and Chrome 9 all on Mac OS X. File has this content:

html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */

Answer 2

One method of solving this issue is to force the fixed-position elements into their own render layers. This can be done by applying a 3d transform, for example:

.navbar-fixed-top {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Hope this helps.