position:fixed not working in Google Chrome

user_2729749 0
Viewed 25184

I am having some trouble with a 'fixed' element in Google Chrome. The element behaves as it should in other major browsers.

Here is the CSS:

#element { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 10;
}

The issue is, when the page loads, the element is fixed at the bottom of the viewport, as it should be. Upon scrolling, it remains at the same spot where it was when the page loaded - it doesn't stay fixed to the bottom of the screen.

css-position google-chrome css
13 Answers

I had to disable:

-webkit-transform: none !important;
transform: none !important;

to make it for me.

user_39596620

I had to put a left position too for this to appear...not just a top:

{
    left: 0px;
}
user_57940170

None of these answers worked for me. What worked for was setting the contain property of the parent element to none:

{
  contain:none !important;
}

user_89055040

I used position: sticky; bottom: 0; for now.

#element { 
   position: sticky; <--- 
   bottom: 0px; 
   width: 100%; 
   height: 50px; 
   z-index: 10;
}
user_39348860

I fixed it by removing

filter: blur(0);

in the parent element. I only had this issue with chrome, it was working well with Safari.

user_31611850

The property will-change:transform; was causing the issue for me. I just needed to add will-change:auto; to override it.

user_110967170

For me none of these solutions helped, the problem turned out to be one of my Chrome extensions. Disabled all extensions and the problem has been resolved.

user_21995030

Try using

contain: none;

in the parent element.

user_90691030
Related