Fixed element disappears in Chrome

position: fixed disappears
div disappears
position: absolute element disappears
css fixed div
div disappears on scroll
position: fixed removes div
sticky vs fixed
css fixed mdn

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.

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.

css - Fixed element disappears in Chrome, Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and​  I have a web page built in ASP.NET MVC that uses fixed positioning to allow users to always see the row headers when scrolling. When using Internet Explorer 9 the fixed elements disappear and reappear from view when scrolling. I have tested in Chrome and it works correctly there. I have also made sure that IE is using standards mode and not quirks.

This fixes it for me:

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

Fixed element disappears in Chrome - css - html, The Problem. Consider this layout: layout. The HTML elements are coded in the order specified, i.e. content blocks 1 and 2, header 3,  en faisant défiler sur un site Web que j'ai construit, en utilisant la propriété CSS position: fixed fonctionne comme prévu pour garder une barre de navigation en haut de la page. dans Chrome, cependant, si vous utilisez les liens dans la barre de navigation il parfois disparaît. Généralement, l'élément sur lequel vous avez cliqué est

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

How to Fix Randomly Disappearing Absolutely-Positioned Elements , Append a new content inside any element in slider, a scroll bar DIV is disappearing in Google Chrome elements and transforms in some cases (​especially position:fixed) so I'm not sure there is a workaround as such. 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.

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;

DIV is disappearing in Google Chrome - HTML & CSS, The only thing to do is to reorient the elements so that the element that was the relatively positioned parent is now a sibling — which mostly  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); Fixed position elements are lifted to a composited layer in both Blink and WebKit, by default.

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.

Dealing With Disappearing “Position: Fixed” On Overflow?, When I add the position: fixed; rule to my css, the header simply disappears. div { border-radius: 5px; height: 75px; } #header { z-index: 1; height: 60px;  To see if Chrome's open and force quit, follow the steps below for your operating system. Windows. Press Ctrl + Alt + Delete. Click Task manager . Under 'Processes', look for 'Google Chrome' or

Header disappears when I add position: fixed;, An event is the the missing feature of CSS position:sticky . we've crafted an end goal: create an event that fires when a position:sticky element becomes fixed. You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours. If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).

An event for CSS position:sticky | Web, In Chrome 22 the layout behavior of position:fixed elements is slightly different than previous versions. All position:fixed elements now form new  Sticky elements work perfectly, but I have a problem on my Ipad. The problem happens in Safari, Chrome, but also Firefox (so probably not a webkit issue?) : When I scroll down => element becomes sticky. It dissapears during 1/2 seconds and comes back. And if I scroll to quickly, it happens again. I need to wait (not scroll) to make it reappearing.

Stacking Changes Coming to position:fixed elements, Issue 128375: Element that is "position: fixed" disappears/behaves erratically above canvas. Reported by Make sure Chrome window is wider than 808px. 3. When a sentinel scrolls into the visible viewport, we know a header become fixed or stopped being sticky. Likewise, when a sentinel exits the viewport. First, I set up observers for the header and footer sentinels: /** * Notifies when elements w/ the `sticky` class begin to stick or stop sticking.

Comments
  • I wonder whether it's related to this issue...
  • Thanks for the link, I've contributed to the thread, but still wondering if there's a way around the issue.
  • Funny, I have the exact opposite problem where top:0 displays the element but bottom:0 does not. Unfortunately none of these answers fix it either.
  • Just a side note, your page is trying to load unsafe scripts (HTTP protocol) while the normal protocol for your page is HTTPS. You should probably fix that as it's a security issue, and major browsers (like chrome) won't load the scripts initially, which can break your page
  • @FullyHumanProgrammer thanks, this question was posted long before I switched to HTTPS but looks like something has changed. Will look into it.
  • I struggled with this bug for several hours, you saved me. This should be the accepted answer! Thanks.
  • This worked for me, I had the problem only on Chrome/Win, not on Chromium/Ubuntu, by the way.
  • Bug is still there in Chrome38/OSX and this answer still works.
  • Found this problem, Chrome 41.0.2224.3 the answer solved the problem. Thanks!
  • That moment when a perfect answer makes you wonder just what you would have done if stackoverflow did not exist!