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.
Post a Comment for "Fixed Position Element Is Not Actually Being Fixed In Chrome"