Promień graniczny powoduje dziwne zachowanie w IE9, IE10 i IE11

ToSkrzypce generuje oczekiwane wyniki w rzeczywistych przeglądarkach (próbowałem FF, GC, Safari), ale nieoczekiwanie łamie IE9, IE10 i IE11. Brak problemów z IE7 lub 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;
}

Jeśli usunęborder-radius luboverflow:hidden od rodzica wszystko działa dobrze. Ale co na Ziemi ma wspólnego z dzieckiem o stałej pozycji? Powinien być zawsze ustawiony względem widoku.

Czy jest to znany udokumentowany błąd? Jakie jest tego uzasadnienie?

questionAnswers(2)

yourAnswerToTheQuestion