css "fixed" child element positions relative to parent element not to the viewport, why?

Question

I'm developing a wordpress theme, with an isotope grid and where a hover on a post should display its title with a fixed position on the bottom of the browser. I have this simplified structure:

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

Via jQuery, a hover on <article> should display its child element h2.subtitled. <article> is positioned relative, but gets an absolute position by the isotope script. The h2.subtitled is positioned fixed with:

.subtitled {
            display: none;
            position: fixed;
            z-index: 999999999;
            bottom: 20px;
            left: 0;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
            text-align: center;
            color: yellow;
}

For some reason, the h2.subtitle elements get positioned fixed related to the parent <article> element, so an the bottom of each <article>. If I set the <h2> outside of the <article>, it is positioned fixed related to the browser, but they need to be inside of the <article> element, because an infinite scroll appends the new <article> elements and they should as well contain the <h2> titles.

Does anyone know, how to make this position fixed and related to the browser window?

Thanks!

Solution 1

FWIW, when I ran into this, the problem turned out to be a parent div with -webkit-transform: translate3d(0, 0, 0) in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed.

For what I was trying to do (turning fixed on and off as a way of sticking a key nav element to the top of the page as it scrolled by), the solution was to append it to the page body element when it was time to hold it in place and sticking it back in its wrapper div when it wasn't. No idea if any of this would have helped the OP, but if you're chasing this bug yourself, worth looking into.

Solution 2

Remove the transform property from the parent of the fixed element.

For some reason this causes the fixed element to become relative to the parent instead of the document.

Codepen example.

Solution 3

In case there are other people who have been running into this mess and don't have a transform property, the value of a properly that has blur() also causes this to mess up.

This was such a pain point for me. Too much time wasted of figuring this one out. :(

Solution 4

In my case, the parent element doesn't have a transform property but filter: drop-shadow(...) which caused the same problem. Removing the filter solved the problem.

View more solutions

Comments

[BlueCaret]

Here is a proof of concept demonstrating this annoyance: codepen.io/markdebeer/pen/qrBDm

[carinlynchin]

OMG thanks...this was driving me INSANE....turns out I did add a transform...its not just the 3d, but I was using translate Y...removed it and fixed acts like its supposed to. I wonder when they are going to fix this because I feel like I have seen this before a while back...its just a pain because I use top:50% and translateY(-50%) to vertically center....

[Jan]

wow, thanks for this answer. I had the same problem. I needed to add translate3d because of a chrome background-color rendering bug (yuck). Of course it's causing more problems now haha

[John Weisz]

The issue is still present in Chrome as of March 2017.

[trusktr]

The issue is still present in Chrome as of March 2018. Darn browsers!

[Norman Breau]

Experienced this same issue on Chrome 67 and for me it was caused by the parent having a will-change: transform property.

[Giannis Dallas]

Amazing, the issue is still there as of August 2018

[Dalibor]

Issue is still here, ALL major browsers; when I use iScroll plug in (that uses translate) and place an element with fixed position inside of it, the element is still displayed relatively to (some of the) parent(s)

[Dalibor]

Funny thing, if they fix it in browsers, CSS on some of my pages will crack like a bomb :D

[Dalibor]

They will probably not fix it, because "For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."

[Lorenzo Lapucci]

11/2019 still not fixed, this answer is a life saver

[REJH]

contain: strict on the parent also causes this issue :|

[Sharak]

I've been fighting the same bug recently. drop-shadow completely changed behaviour of fixed elements inside it. Had to drop it as I couldn't find any solution.