Position fixed doesn't work when using -webkit-transform

Question

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrolls down with the user.

In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?

Answer 1

The CSS Transforms spec explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior.

They do work when applied to the same element; the element will be positioned as fixed, and then transformed.

Answer 2

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

EDIT: As of 10/24/2012 the bug has not been resolved.

---

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

Answer 3

Something (a bit hacky) that worked for me is to position:sticky instead:

.fixed {
     position: sticky;
}

Answer 4

For anyone who finds their background images are disappearing in Chrome because of the same issue with background-attachment: fixed; - this was my solution:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

Answer 5

August 2016 and fixed position & animation / transform is still a problem. The only solution that worked for me – was to create an animation for the child element that takes longer time.

Answer 6

Actually I found another way to fix this "bug":

I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.

Example:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

Demo: http://jsfiddle.net/ZWcD9/

Answer 7

I had this issue whilst trying to implement react-color with react-swipeable-views (rsw). The problem for me was that rsw applies translate(-100%, 0) to a tab panel which breaks the default fixed position div added over the full screen which when clicked closes the color picker model.

For me the solution was to apply the opposite transform to the fixed element (in this case translate(100%, 0) which fixed my issue. I'm not sure if this is useful in other cases but thought I would share anyway.

Here is an example showing what I've described above:

https://codepen.io/relativemc/pen/VwweEez

Answer 8

on my phonegap project the webkit transform -webkit-transform: translateZ(0); worked like a charm. It was already working in chrome and safari just not the mobile browser. also there can be one more issue is WRAPPER DIVs are not completed in some cases. we apply clear class in case of floating DIVs.

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

Answer 9

Probably due to a bug in Chrome as I can't replicate in Safari nor Firefox, but this works in Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

It's a very particular structure so it's by no means a universally applicable one-lined css fix, but perhaps someone can tinker with it to get it working in Safari and Firefox.

Answer 10

I just added transform: unset; to my fixed header and that worked for me!

I am also using framer motion with Next.js and having the same problem with my fixed header and this seems to fix it easily.

.header {
    position: fixed;
    transform: unset;
}

Answer 11

Setting fixed element to transform:unset; is working for me.

Answer 12

If you work with React, you can wrap the element with fixed position in a Portal, and this way it will work fine

Answer 13

Adding the -webkit-transform to the fixed element solved the issue for me.

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

Answer 14

Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 15

the fixed position of an element is broken if you apply transform to any ancestor.

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

Answer 16

If you can use javascript as an option this can be a workaround for positioning a position fixed element relavtive to the window when it's inside a transformed element:

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

Granted you will also have to adjust your heights and width because fixedEl will be calculating it's with based on it's container. That depends on your use case but this will allow you to predictably set the something position fixed, regardless of it's container.

Answer 17

Add a dynamic class while the element transforms.$('#elementId').addClass('transformed'). Then go on to declare in css,

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

then

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

then

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

Now position: fixed when provided with a top and z-index property values on a child element just work fine and stay fixed until the parent element transforms. When the transformation is reverted the child element pops as fixed again. This should easen the situation if you are actually using a navigation sidebar that toggles open and closes upon a click, and you have a tab-set which should stay sticky as you scroll down the page.

Answer 18

in my case I found out we can't use transform: translateX() before transform:translateY().if we want to use both we should use transform:translate( , ).

Answer 19

If you're animating back to the original position where all translates are 0, you can use this solution where you set transform: unset;:

  100% {
    opacity: 1;
    visibility: visible;
    /* Use unset to allow fixed elements instead of translate3d(0, 0, 0) */
    transform: unset;
  }

Answer 20

If you use React then you can use ReactDOM.createPortal.

Credit goes for Porkopek for the tip, but it took me some time to figure out what this thing is. So here's what I found:

If you return a component wrapped in ReactDOM.createPortal then as the second argument you can set the parent element, and React will append the component to that given element, so example position: fixed will be fine even as a child of a transformed component.

import ReactDOM from "react-dom";


const MyModal = () => {
    return ReactDOM.createPortal(
       <div style={{position: "fixed", top: "0", left: "0", 
                    background: "white", color: "black", 
                    padding: "3rem", zIndex: "50000"}}>
         Modal Element
       </div>,
       document.body
    )

}

In this case React will render this component as the child of the body, not as the child of the parent component.

Answer 21

Please don't up vote, because this is not exact answer, but could help someone because it's fast way just to turn off the transformation. If you really don't need the transformation on the parent and you want your fixed position working again:

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}