javascript - 固定位置元素实际上并没有在 Chrome 中固定

Question

Chrome 已经开始使用固定位置元素做一些非常奇怪的事情。基本上它仍然随着页面滚动，即使它被设置为固定的。仅通过链接到实时站点来解释是最简单的。

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

如果你在 firefox 或 hell 中查看它，即使是 IE，“Block 1 Block 2 Block 3”文本也能正常工作，一旦你将它滚动到屏幕顶部，它就会一直停留在屏幕顶部，直到你点击“释放”再往下一点。

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

Answer 1

我注意到您正在使用转换。这就是导致问题的原因。

查看规范:The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

因此具有固定定位的元素将相对于具有转换的元素 - 而不是视口(viewport)

看看这个FIDDLE在 webkit 浏览器中查看实际效果

<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;
}