position:fixed not working in Google Chrome

问题

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.

回答1:

try adding the following code to your element:

-webkit-transform: translateZ(0);

回答2:

I had a property: -webkit-perspective:800; on the body tag. I removed this and the fixed positioning started working again... obscure, but worth a look.

回答3:

As an addition to the won answer: this would not work if you have "-webkit-transform-style: preserve-3d" in one of the parent elements. I don't know why, I just had such and removed it.

回答4:

I had to disable:

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

to make it for me.

回答5:

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

{
    left: 0px;
}

回答6:

None of this answers worked for me. What worked for me is setting the contain property of the parent element to none

{
  contain:none !important;
}

回答7:

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

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

回答8:

To complete what the other answers are saying, also be aware that setting the will-change property on any parent element will break fixed positioning.

回答9:

First check if any parent have

-webkit-transform: translateZ(...);

or

transform: translateZ(...);

or

-webkit-transform: translate3d(...)

or

transform: translate3d(...)

and try removing them.

---

If still doesn't work try adding

-webkit-transform: translateZ(0);

or

transform: translateZ(0);

to your element.

---

If still doesn't work check for other -webkit-transform / transform / perspective styles on parents and remove them.

回答10:

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.

回答11:

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

回答12:

Try using

contain: none; 

in the parent element.

来源：https://stackoverflow.com/questions/20503424/positionfixed-not-working-in-google-chrome