Chrome and Opera refuse to transition from flex: 0 to flex: 1

Question

Chrome and Opera absolutely refuse to animate the transition between flex: 0 and flex: 1, which works fine in Firefox. On top of it, some Safari users report that it working, but with my Safari it fails to even change the slides. Plus it doesn't work with IE at all.

Is the whole idea inherently flawed, or is it a browser issue?

HTML:

  <input type="radio" name="radio-btn" id="inb" />
  <figure class='b'>
  </figure>

  <input type="radio" name="radio-btn" id="inc" />
  <figure class='c'>
  </figure>

CSS (most of it is actually prefixes):

main {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: -webkit-column;
  flex-direction: -moz-column;
  flex-direction: -o-column;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
}

input {
  position: fixed;
  left: 50%;
}

#ina {
  top: 40%;
}

#inb {
  top: 50%;
}

#inc {
  top: 60%;
}

figure {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: -webkit-row;
  flex-direction: -moz-row;
  flex-direction: -o-row;
  flex-direction: row;
  width: 100%;
  height: 100%;
  -webkit-flex: 0;
  -moz-flex: 0;
  -o-flex: 0;
  flex: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.a {
  background: CornflowerBlue;
}

.b {
  background: tomato;
}

.c {
  background: DarkKhaki;
}

#ina:checked + .a {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

#inb:checked + .b {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

#inc:checked + .c {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

Link to the codepen: http://codepen.io/budgieweb/pen/jPwpXE

Answer 1

The problem is flex:0 you can change for:

flex: 0.0000001;

it is a know issue https://code.google.com/p/chromium/issues/detail?id=460510 in chrome