Fixed Position Element Is Not Actually Being Fixed In 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 ex

Solution 1:

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

Take a look at the spec: 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.

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

Look at this FIDDLE in a webkit browser to see this in action

<divclass="wpr"><divclass="fixed"></div></div>.wpr
{
    width:200px;height:1000px;background:pink;position:relative;margin:0200px;-webkit-transform:translateX(0);transform:translateX(0);
}
.fixed
{
    width:200px;height:200px;margin:50px;position:fixed;top:0;left:0;background:aqua;
}

Solution 2:

This looks like a bug in Chrome (and Safari, but Chrome is the focus of this question).

I haven't found an open issue for this bug; you should submit a report to Chromium Issues.