CODEWITHSUNDEEP
javascripthtmlcss
Kyle S
Kyle S

Reputation: 448

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 explain just by linking to the live site.

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

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.

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.

Upvotes: 0

Views: 166

Answers (2)

Danield
Danield

Reputation: 125423

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

Upvotes: 3

Tyler Eich
Tyler Eich

Reputation: 4248

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.

Upvotes: 0

Related Questions