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.

If you'd like to solve this, you might want to hide and show the complete body so as to force it to redraw the whole. — pimvdb, Feb 12 '11 at 20:42
After the Contact link has been pressed, you might want to execute this: `window.scrollTo(window.pageXOffset,window.pageYOffset-1)`. It scrolls your page one pixel up, which resolves the header disappearance. (My first suggestion was wrong, sorry.) — pimvdb, Feb 12 '11 at 20:53
If this is a demonstrable bug in Webkit, have you considered sumbitting it to Google and/or Apple to get it fixed? — Spudley, Feb 12 '11 at 21:23
Well, I don't know how to fix it, what's causing it, etc... My only clue is it probably has to do with embedded Youtube video (Flash) — Daniel, Feb 12 '11 at 21:39

score 22 · Answer 1 · answered Jul 18 '13 at 11:49

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.

score 7 · Accepted Answer · edited Oct 07 '13 at 09:35

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 */

I've tested it here and now I see the real problem. :) fancy that! — msmafra, Feb 13 '11 at 16:55

score 2 · Answer 3 · edited Sep 22 '12 at 01:39

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);

edited Sep 22 '12 at 01:39

Andrew Barber

39,603
20
94
123

answered Sep 10 '12 at 17:19

user1487045

31
6

score 1 · Answer 4 · answered Apr 14 '16 at 20:35

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

Weird webkit issue with position: fixed

4 Answers4

Linked