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

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

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.