Fixed element disappears in Chrome

Question

When scrolling on a website I've built, using the CSS property position: fixed works as expected to keep a navigation bar at the very top of the page.

In Chrome, however, if you use the links in the navigation bar it sometimes disappears. Usually, the item you've clicked on is still visible, but not always. Sometimes the entire thing disappears. Moving the mouse around brings back part of the element, and scrolling with the scroll wheel or arrow keys just one click brings the element back. You can see it happening (intermittently) on https://nikeplusphp.charanj.it - you might have to click on a few of the navigation the links a few times to see it happen.

I've also tried playing with the z-index and the visibility/display type but with no luck.

I came across this question but the fix didn't work for me at all. Seems to be a webkit issue as IE and Firefox work just fine.

Is this a known issue or is there a fix to keep fixed elements visible?

Update:

Only effects elements that have top: 0;, I tried bottom: 0; and that works as expected.

Answer 1

Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.

I created a Chrome bug for this https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Please star it so this can get some attention.

Answer 2

This fixes it for me:

html, body {height:100%;overflow:auto} 

Answer 3

I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#element {
    position: fixed;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Answer 4

The options above were not working for me until I mixed two of the solutions provided.

By adding the following to the fixed element, it worked. Basically z-index was also needed for me:

-webkit-transform: translateZ(0);
z-index: 1000;