[ACCEPTED]-Weird webkit issue with position: fixed-position

Accepted answer
Score: 22

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

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

Hope this helps.

Score: 7

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

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

After a 5 local test I saw the real problem :). I've 4 created a correction.css and tested in Opera 3 11, Safari 5, Firefox, 3.6, Firefox 4.0 2 beta 11 and Chrome 9 all on Mac OS X. File 1 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 */
Score: 2

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

Score: 1

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

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

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

More Related questions