Internet Explorer 10 css3 transition height not happening with parent padding-bottom value

Question

I have a container div which in order to make it fluid in relation with the width of the window (and keep square proportions) has the following css:

JSFIDDLE

#container {
    width:30%;
    height:0;
    padding-bottom:30%;
    position: relative;
}

it has an inner div with a fixed height and width that should become 100% (both) with a transition when hovering:

#inside {
    position:absolute;
    top:0;
    left:0;
    width:30px;
    height:30px;
    -webkit-transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -o-transition: width 0.4s, height 0.4s;
    -ms-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
}

#container:hover #inside {
    width: 100%;
    height:100%;
}

In Chrome,Firefox,Opera,Safari there is no problem. Internet Explorer 10 however, doesnt transitions the height value, so there is a jump. Is there a way I can solve this for ie10 without touching the structure of the divs (padding-bottom in parent div)?

Answer 1

Try making the following changes to #inside:

• Add min-width: 30px; and min-height: 30px;
• Change width: 30px; to width: 1%; and height: 30px; to height: 1%;

#container:hover #inside {
    height: 100%;
    width: 100%;
}
#container {
    background: black;
    height: 0;
    padding-bottom: 30%;
    position: relative;
    width: 30%;
}
#inside {
    background: pink;
    height: 1%;
    left: 0;
    min-height: 30px;
    min-width: 30px;
    position: absolute;
    top: 0;
    -webkit-transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -o-transition: width 0.4s, height 0.4s;
    -ms-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
    width: 1%;
}

<div class="out" id="container">
    <div id="inside"></div>
</div>

JS Fiddle: http://jsfiddle.net/r8rjhy9v/