Border-radius causes weird behaviour in IE9, IE10 and IE11

Question

This Fiddle produces expected results in real browsers (I tried FF, GC, Safari), but breaks unexpectedly in IE9, IE10 and IE11. No problems with IE7 or IE8.

<div class="root">
    Top
    <div class="footer">Bottom</div>
</div>

.root {
    background-color: red;
    position: absolute;
    height: auto;
    bottom: 0; top: 0; left: 0; right: 0;
    margin: 25px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
}

.footer {
    background-color: green;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
}

If I remove border-radius or overflow:hidden from parent, everything works fine. But what on Earth does it have to do with fixed position child? It is supposed to be always positioned relatively to viewport.

Is it a known\documented bug? What is the rationale behind it?

Answer 1

Here is what I think is happening.

Browser vendors seem to have decided that fixed position elements that overflow have clipping turned off, e.g. they are not clipped by their parents. This makes things consistent, since fixed elements are positioned relative to the window, not the parent. If clipping was applied, it would have position/width relative to the window and clipping relative to the parent. It would visually look like this (except the bottom corners should be rounded--more on that below).

So: fixed element, no overflow clipping. Check.

But something changed in IE9. They introduced support for rounded corners. Now to what I said about the rounded clipping. IE9 actually did this right. Many browsers right now will clip with square corners, even when the element has rounded corners. This is bad. Apparently, IE9 fixed this by detecting the presence of rounded corners, and in such cases, re-drawing the clipping. When it does that, it makes two mistakes.

1. It applies the clipping--undoing the "fixed element, no overflow clipping" rule. Clipping is turned back on, and the element is now clipped by the width of the parent.

2. The clipping is just put directly on the element, un-centered, with no regards to the fact that the clipping is supposed to be from the parent. It's just clipped starting at 0,0 out to the designated width and height--that's why the green element appears left aligned--the right/bottom 50px are hidden.

Fixes?

• Don't nest fixed inside absolute. (Best solution--avoid weird edge-cases in the future)
• Give the parent (red) div a width.
• Nest a new div directly inside .root and move the overflow:hidden to it. Fiddle example. (Least intrusive)