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

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

The height adjustment did nothing for me. The fix for the issue with a fixed position element disappearing in Chrome for me is: window.scrollTo(window.pageXOffset,window.pageYOffset-1);

Answer 3

Fixed position elements are lifted to a composited layer in both Blink and WebKit, by default. There is no need to lift fixed position elements in Safari, as they are already composited.

What you need to do is the reverse. You need to lift all non fixed:position elements by using translateZ(0):

http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb

Answer 4

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.