title: Border-radius causes weird behaviour in IE9, IE10 and IE11
body: <p>This <a href="http://jsfiddle.net/uvZCq/" rel="nofollow noreferrer">Fiddle</a> 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.</p>
  
  <p><img src="https://i.stack.imgur.com/3viAn.png" alt="Firefox is on the left and IE9-IE11 is on the right"></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="root"&gt;
      Top
      &lt;div class="footer"&gt;Bottom&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  
  <p>If I remove <code>border-radius</code> or <code>overflow:hidden</code> 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.</p>
  
  <p>Is it a known\documented bug? What is the rationale behind it?</p>