parent & child with position fixed, parent overflow:hidden bug

by

You could consider using CSS clip: rect(top, right, bottom, left); to clip a fixed positioned element to a parent. See demo at http://jsfiddle.net/lmeurs/jf3t0fmf/.

Beware, use with care!

Though the clip style is widely supported, main disadvantages are that:

  1. The parent’s position cannot be static or relative (one can use an absolutely positioned parent inside a relatively positioned container);
  2. The rect coordinates do not support percentages, though the auto value equals 100%, ie. clip: rect(auto, auto, auto, auto);;
  3. Possibillities with child elements are limited in at least IE11 & Chrome34, ie. we cannot set the position of child elements to relative or absolute or use CSS3 transform like scale.

See http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ for more info.

EDIT: Chrome seems to handle positioning of and CSS3 transforms on child elements a lot better when applying backface-visibility, so just to be sure we added:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

to the main child element.

Also note that it’s not fully supported by older / mobile browsers or it might take some extra effort. See our implementation for the menu at bellafuchsia.com.

  1. IE8 shows the menu well, but menu links are not clickable;
  2. IE9 does not show the menu under the fold;
  3. iOS Safari <5 does not show the menu well;
  4. iOS Safari 5+ repaints the clipped content on scroll after scrolling;
  5. FF (at least 13+), IE10+, Chrome and Chrome for Android seem to play nice.

EDIT 2014-11-02: Demo URL has been updated.

More Related Contents:

  1. Fixed position but relative to container
  2. Limit text length to n lines using CSS
  3. CSS text-overflow in a table cell?
  4. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  5. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  6. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  7. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  8. firefox overflow-y not working with nested flexbox
  9. Make child visible outside an overflow:hidden parent
  10. Div height 100% and expands to fit content [duplicate]
  11. Disable zoom on a div, but allow zoom on the page (an alternate div)
  12. How to make the overflow CSS property work with hidden as value
  13. Overflow to left instead of right
  14. Make floating child visible outside an overflow:hidden parent
  15. CSS3 property webkit-overflow-scrolling:touch ERROR
  16. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  17. How to ignore parent element’s overflow:hidden in css
  18. Hide scrollable content behind transparent fixed position divs when scrolling the page?
  19. Have a fixed position div that needs to scroll if content overflows
  20. Issue when centering vertically with flexbox when heights are unknown
  21. Horizontal scroll in DIV with many small DIV’s inside (no text)
  22. overflow: hidden on div and body, different behavior
  23. Should I use max-device-width or max-width?
  24. CSS Font Border?
  25. Pure CSS collapse/expand div
  26. Next.js Global CSS cannot be imported from files other than your Custom
  27. Nested rows with bootstrap grid system?
  28. How do I line up 3 divs on the same row?
  29. Filling water animation
  30. Is a CSS property starting with a hash (#) valid?

Leave a Comment