position: fixed children not functioning with ‘transform3d’

Problem

I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (top:0px, left:0px).

This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.

I’ve provided a JSFiddle with an example where the yellow box should be at the top corner of the page instead of inside the container element.

A simpler version of the fiddle can be found below:

How can I make translate3d function with children who are fixed in place?

Asked by Juan Carlos Moreno

Solution #1

This is because, according to the W3C specification, the transform produces a new local coordinate system:

Fixed placement then becomes fixed to the modified element rather than the viewport.

I’m not aware of any workarounds at the moment.

Un-fixing Fixed Elements with CSS Transforms is also detailed in Eric Meyer’s paper.

Answered by saml

Solution #2

Simply grab the window scrollTop and apply it to the absolute position top, as suggested by Bradoergo:

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

In any case, it worked for me.

Answered by UzumakiDev

Solution #3

When elements on the page used transform, my fixed top nav would flicker. Applying the following to my top nav remedied the jumping/flickering issue:

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Thanks to this SO answer.

Answered by rob.m

Solution #4

You can use position: sticky; instead of position: fixed; in Firefox and Safari, but it will not function in other browsers. Javascript is required for this.

Answered by Dušan

Solution #5

The simplest way to deal with this, in my opinion, is to use the same translate, but break children who need to be fixed off of their parent (translated) element, and then apply the translate to a div within the position: fixed wrapper.

The end result should look like this (in your case):

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle: https://jsfiddle.net/hju4nws1/

While this may not be ideal for some use cases, if you’re fixing a div, you probably don’t care about what element is its parent or where it falls in your DOM’s inheritance tree, and it appears to solve the majority of the headache – while still allowing both position: fixed and position: relative to coexist in (relative) harmony.

Answered by reid

Post is based on https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children