ie10, border-radius, overflow, position and hidden position:fixed child

Question

I stumbled on something weird with IE10 and IE9, not affecting IE8: a "position: fixed" child element is hidden when the border-radius, overflow and position of its parent are set (cf. the jsfiddle example). If one of these properties is disabled, the fixed element appears.

I put a live example at http://jsfiddle.net/arkhi/7Nydz/.

<div style="position:relative; border-radius:5px; overflow:hidden;">
    <a style="position:fixed">fixed child</a>
</div>

2. Ideally, all red boxes should appear at the bottom right of the page, from right to left.
3. On IE9 and IE10, the first box is hidden.
4. If one does a "select all" then click somewhere on the page, it happens that the first box appears.

I would like to know if anybody have any explanation or link explaining this bug (if this is a bug and not me not seeing the obvious).

Thanks a lot for any feedback on this!

Answer 1

In the absence of an useful answer from anyone else, the only way I've managed to work around this is to add an additional nested element, and split the three affected styles across two layers.

<div>      //style with position:fixed
  <div>    //style with overflow:hidden and border-radius
    ....
  </div>
</div>

It's not ideal, but it does work around the problem.

To prove it works, here's your jsFiddle with the change made to test-1: http://jsfiddle.net/7Nydz/2/

Answer 2

Seems to be a common issue:

Fortunately, there is a quick and dirty solution: simply place an empty un-positioned static <div></div> immediately before and/or after the absolutely-positioned element. In the fixed example, an empty <div></div>after the header prevents the problem occurring.

Semantic HTML devotees will be horrified but I’m afraid there doesn’t appear to be a CSS-only fix … unless anyone knows otherwise?

http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/