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

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


Source: cross-browser

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.