位置：已修复无法在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

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

Answer 3

作为对获奖答案的补充：如果你有＆＃34; -webkit-transform-style：preserve-3d＆＃34; ，那么这将不起作用其中一个父元素。我不知道为什么，我只是把它拿走了。

Answer 4

我不得不禁用：

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

为我做好准备。

Answer 5

我不得不放置一个左侧位置，以便出现...而不仅仅是顶部：

{
    left: 0px;
}

Answer 6

这些答案都没有对我有用。 对我有用的是将父元素的 contain 属性设置为 none

string a="c386";
char b = (a[0] - 'A' + 10) * 16 + a[1] - '0';
char c = (a[2] - '0') * 16 + a[3] - '0';
cout << b << c << endl;

Answer 7

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

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

Answer 8

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

Answer 9

首先检查父母是否有

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

或

transform: translateZ(...);

或

-webkit-transform: translate3d(...)

或

transform: translate3d(...)

并尝试删除它们。

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

-webkit-transform: translateZ(0);

或

transform: translateZ(0);

到您的元素。

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

Answer 10

我通过移除对其进行了修复

filter: blur(0);

父元素中的

。 我在chrome上只有这个问题，它在Safari上运行良好。

Answer 11

属性will-change:transform;对我造成了问题。 只需添加will-change:auto;即可覆盖它。

Answer 12

尝试使用

contain: none; 

在父元素中。