0

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

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

如果您在 Firefox 或地狱中查看它，即使是 IE，“Block 1 Block 2 Block 3”文本也会正常运行，一旦您将其滚动到屏幕顶部直到您进一步点击“释放点”，它就会粘在屏幕顶部下。

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

4

2 回答 2

3

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

看一下规范：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;
}
于 2013-10-24T23:47:03.437 回答
0

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

我还没有发现这个错误的未解决问题；您应该向Chromium Issues提交报告。

于 2013-10-24T23:34:06.497 回答