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

Question

I don't know if there is an issue, but I was wondering why the overflow:hidden does not function on fixed parent/children element.

Here's an example:

CSS and HTML:

.parent{    position:fixed;    overflow:hidden;    width:300px;    height:300px;    background:#555;  }  .children{    position:fixed;    top:200px;    left:200px;    width:150px;    height:150px;    background:#333;  }

<div class="parent">    <div class="children">    </div>  </div>

Live demo: jsFiddle

Answer 1

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.

Answer 2

Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning