‘transform3d’ not working with position: fixed children

by

This is because the transform creates a new local coordinate system, as per W3C spec:

In the HTML namespace, 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.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

There’s not currently a work-around that I’m aware of.

It is also documented on Eric Meyer’s article: Un-fixing Fixed Elements with CSS Transforms.

More Related Contents:

  1. Position fixed doesn’t work when using -webkit-transform
  2. How to center a “position: absolute” element
  3. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  4. How does the “position: sticky;” property work?
  5. How to keep origin in center of image in scale animation?
  6. Why does position:relative; appear to change the z-index?
  7. Html/Css Triangle with pseudo elements
  8. Why do absolute elements stack up on each other instead of stacking one after the other?
  9. Setting transform-origin on SVG group not working in Firefox
  10. Absolute position is not working
  11. Position: sticky buttons not working in IE 11
  12. Unskewing the ends of an assortment multiple skewed images
  13. ‘position: sticky’ not working when ‘height’ is defined
  14. Center aligning a fixed position div
  15. Position absolute and overflow hidden
  16. Absolute positioning inside absolute position
  17. How to make div’s percentage width relative to parent div and not viewport
  18. Why does my Transform snap back?
  19. Why is an element with position: fixed moving with a non-positioned sibling?
  20. Why isn’t my margin working with position: fixed?
  21. How to rotate and postion an element on the top left or top right corner?
  22. 5 images symmetrically seperated with diagonal lines
  23. Why doesn’t width/height work with non positioned pseudo elements?
  24. body { overflow-x: hidden; } breaks position: sticky
  25. Why using absolute position causes the div to be on top?
  26. sticky position on css grid items
  27. How to transform each side of a shape separately?
  28. How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
  29. How to work with ellipsis in bootstrap responsive table
  30. What’s wrong with this div? [closed]

Leave a Comment