Question

Chrome已经开始使用固定位置元素做一些非常奇怪的事情。基本上它仍然滚动页面，即使它被设置为固定。通过链接到现场网站来解释是最容易的。

http://new.safetylineloneworker.com/?page_id=9

如果你在firefox中看到它，或者地狱，即使是IE，“Block 1 Block 2 Block 3”文本就像它应该的那样，一旦你滚动它就会粘在屏幕顶部，直到你点击'释放点'进一步下来。

在Chrome中查看它，它不仅比它应该更早地跳到它的固定位置，而且它也只是...滚动，即使它显然设置为固定位置。这真是我见过的最离奇的事情之一。

Answer 1

我注意到你正在使用转换。这就是造成这个问题的原因。

查看规范：The Transform Rendering Model

为'transform'属性指定'none'以外的值在元素处建立一个新的局部坐标系适用于。

因此具有固定定位的元素将变为相对于具有变换的元素 - 而不是视口

在webkit浏览器中查看此FIDDLE以查看此操作

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}

Answer 2

这看起来像Chrome中的一个错误（和Safari，但Chrome是这个问题的焦点）。

我还没有找到这个漏洞的公开问题;您应该向Chromium Issues提交报告。

固定位置元素实际上并未在Chrome中修复

2 个答案: