位置：已修复无法在Google Chrome中使用

Question

我在使用Google Chrome中的“固定”元素时遇到了一些问题。该元素在其他主流浏览器中的行为应该如此。

这是CSS：

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

问题是，当页面加载时，元素固定在视口的底部，应该是这样。在滚动时，它仍然保持在页面加载时的相同位置 - 它不会保持固定在屏幕的底部。

Answer 1

尝试将以下代码添加到您的元素：

-webkit-transform: translateZ(0);

Answer 2

我通过删除修复它

filter: blur(0);

在父元素中。我只有chrome这个问题，它与Safari一起运行良好。

Answer 3

will-change:transform;财产对我来说是个问题。只需要添加will-change:auto;来覆盖它。

Answer 4

尝试使用

contain: none; 

在父元素中。

Answer 5

我有一个属性：身体标签上的-webkit-perspective:800;。我删除了这个并且固定定位再次开始工作......模糊不清，但值得一看。

Answer 6

作为获胜答案的补充：如果你在其中一个父元素中有“-webkit-transform-style：preserve-3d”，这将无效。我不知道为什么，我只是这样，并删除它。

Answer 7

我不得不禁用：

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

为我做。

Answer 8

我不得不放置一个左侧位置，以便显示......不仅仅是顶部：

{
    left: 0px;
}

Answer 9

这些答案都不适合我。对我有用的是将父元素的contains属性设置为none

{
  contain:none !important;
}

Answer 10

我现在用position: sticky; bottom: 0;。

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

Answer 11

要完成其他答案所说的内容，还要注意在任何父元素上设置will-change属性都会破坏固定定位。

Answer 12

首先检查父母是否有

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

要么

transform: translateZ(...);

要么

-webkit-transform: translate3d(...)

要么

transform: translate3d(...)

并尝试删除它们。

---

如果仍然无效，请尝试添加

-webkit-transform: translateZ(0);

要么

transform: translateZ(0);

你的元素。

---

如果仍然无效，请检查父项上的其他-webkit-transform / transform / perspective样式并删除它们。