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 (intermitently) on http://nikeplusphp.org - 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

None of them worked for me except calling the modal via javascript

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>

other than this, none of the solutions above solved my problem.

Answer 2

This Worked for me . Add Overflow property to your top most container which can be Div or Form etc.

div, form
{
  overflow:visible;    
}

Answer 3

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;

Answer 4

If it don't work after adding

-webkit-transform: translateZ(0)

than also add

user-scalable=no

on viewport meta

source here

it worked for me

Answer 5

This is a webkit issue that has yet to be resolved, oddly making the jump with JavaScript, rather than using the # url value, doesn't cause the problem. To overcome the issue, I supplied a JavaScript version that takes the anchor value and finds the absolute position of the element with that ID and jump to that:

var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
    elements[i].onclick = function() {
        var hash = this.hash.substr(1),
            elementTop = document.getElementById(hash).offsetTop;
        window.scrollTo(0, elementTop + 125);
        window.location.hash = '';
        return false;
    }
}

I could refine this further and make it is that only it only looks for links beginning with a #, rather than ever a tag it finds.

Answer 6

What if none of above worked at all? simple case of sticky header + mobile side menu pushing content.

I try to find a way to avoid fixed element (sticky header) being translated but in this case nothing is a good alternative.

So as there is no workaround on scope so far there is a JS alternative that I opted for to recalculate absolute position of fixed element. See here: https://stackoverflow.com/a/21487975/2012407