Those. 10, border radius, overflow, position and hidden position: fixed child

Question

I came across something strange with IE10 and IE9 without affecting IE8: the child element "position: fixed" is hidden when the boundary radius, overflow and position of its parent are set (see jsfiddle example). If one of these properties is disabled, a fixed item appears.

I will give 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 rectangles should appear in the lower right corner of the page from right to left.
3. In IE9 and IE10, the first box is hidden.
4. If you do "select all" and then click somewhere on the page, this will happen when the first field appears.

I would like to know if anyone has any explanations or links explaining this error (if it is an error and I don't see the obvious).

Thanks so much for any feedback on this!

Answer 1

In the absence of a useful answer from anyone, the only way I could get around this was to add an additional nested element and split the three affected styles into two layers.

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

It is not perfect, but it is working on a problem.

To prove this works, here is your jsFiddle with the change made in test-1 : http://jsfiddle.net/7Nydz/2/

Answer 2

This seems to be a common problem:

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

Semantic HTML devotees will be horrified, but I'm afraid that no seems to be just a CSS fix ... unless someone knows otherwise?

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

Answer 3

So, this is just an idea, and I can’t test it, because I am on a Mac and do not have a Windows machine at hand. But have you tried using clearfix for a fixed element? This will cause the browser to process the item differently and display something else after it. With some luck, can he appear?

This probably doesn't work, but sometimes strange things happen.