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

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 2

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 3

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.

Answer 4

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