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

position: fixed not working in chrome
position:fixed not working on mobile
position: fixed not working with transform
css position: fixed
position:fixed not staying fixed
position: fixed height not working
position fixed isn t working
ie position: fixed not working

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols 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?

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.

position fixed is not working, you need to give width explicitly to header and footer width: 100%;. Working fiddle. If you want the middle section not to be hidden then give  Positions static & relative keep their natural space in the flow of the document, while the absolute & fixed don’t — their space is removed and they have a floating behavior.

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.

When `position: fixed;` is not working. - DEV Community ‍ ‍ , Hello, This is my first posting :) If a parent elements has transform properties, position: fixed; of children elements does not be working. 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.

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');

    });
}  

[Solved] Fixed Positioning not working in Chrome, My question is: why would position:fixed work in FF but not Chrome? doesn't fix the fairly obvious problem of the background-attachment,  Fixed positioning. Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see CSS Transforms Spec ),

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.

position, element takes a fixed position where it is told to stick. inherit : the position value doesn't cascade, so this can be used to specifically force it to,  fixed: The element is positioned relative to the browser window: Play it » relative: The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position: Play it » sticky: The element is positioned based on the user's scroll position

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

.fixed {
     position: sticky;
}

Position fixed doesn't work with transform property, It works, all is sliding fine, but it should have a position: fixed; - this rule is set, but doesn't work with transform one ? Is that any kind of bug,  To create a fixed top menu, use position:fixed and top:0. Note that the fixed menu will overlay your other content. Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

Absolute positioning - position, The position CSS property sets how an element is positioned in a document. whose computed position value is either relative , absolute , fixed , or sticky . If a positioned ancestor doesn't exist, it is positioned relative to the  An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

Advanced layouts with absolute and fixed positioning · WebPlatform , This method works in IE6 */ #foo { position: absolute; top: 3em; left: 0; width: 30em​; height: 20em; } /* This method doesn't  Once the .fixed class kicks in the layout gets all messed up. The fixed div no longer follows the movement of the centered layout on window resizing. Not sure I can't get around this.

CSS: fixed menus, A browser that doesn't know 'fixed' should throw away the rule 'position: fixed' and fall back to whatever the previous value of 'position' in the  Conclusion. If you need a fixed position element on Android 2.2 or 2.3, adding -webkit-backface-visibility: hidden; to the element seems to make it ‘work’.. However, if you try that Codepen on your Android 2.2 or 2.3 device and it doesn’t work, please let me know and I can amend this post.

Comments
  • A demo page often helps people answer questions - jsbin.com lets you make temporary pages to illustrate the problem if you don't want to link to your site.
  • jsfiddle.net is another good example of a temporary editing bin.
  • @Rich Bradshaw jsbin.com is very nice. Didn't know it until now. Most of my projects I run local, so I will use it next time. Tnx
  • It doesn't work fine in Firefox at all.
  • Still an issue in 2017. Seems that they're still sticking to the "It's a feature not a bug!" argument...
  • Even more years later, still not resolved. Pretty sad.
  • According to this answer it's not a bug but part of the spec.
  • sit back and watch -- I bet it will live to its 10 year anniversary
  • Aug 30, 2017, captain's log. We also have encountered the strange anomaly, which was described so long ago by other captains. A solution is still to be implemented.
  • This is the bug that my father's father warned me about.
  • That's the only helpful and correct answer. Stop translating the parent element and translate the childlements where the fixed element is part of it. Here's my fiddle:JSFIDDLE
  • and what if I want to transform a fixed element too?
  • Please answer to new questions. Those questions need you more rather than the person who asked question in 2010. They must have solved the problem by now don't you think ? Also this question already has an accepted answer.
  • Nope! It's still a problem... the person who asked the question might have found another solution – but I found this thread for a reason.