固定位置元素实际上并未在Chrome中修复 [英] Fixed position element is not actually being fixed in Chrome

问题描述

Chrome开始使用固定位置元素做一些很奇怪的事情。基本上它仍然滚动与页面，即使它设置为固定。

Chrome has started doing something very strange with a fixed position element. Basically it's still scrolling with the page even though it's set as fixed. It would be easiest to explain just by linking to the live site.

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

如果你在firefox或地狱看看， IE的块1块2块3文本行为就像它应该，贴在屏幕顶部，一旦你滚动到那里，直到你进一步击中释放点。

If you look at it in firefox, or hell, even IE the "Block 1 Block 2 Block 3" text acts just as it should, sticking to the top of the screen once you scroll it there until you hit the 'release point' further down.

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

Look at it in Chrome, and not only does it jump to its fixed position earlier than it should, but it also just...scrolls, even though it is clearly set to be fixed position. It really is one of the most bizarre things I have ever seen.

推荐答案

我注意到你正在使用变换。

I noticed that you are using transforms. That's what's causing the problem.

查看规格：变换渲染模型

指定非none 'transform'属性
在应用
的元素上建立一个新的局部坐标系。

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

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

So the element with fixed positioning will become relative to the element with the transform - not the viewport

看看这个 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;
}

这篇关于固定位置元素实际上并未在Chrome中修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！