React progress element has a bug on IE10

Question

Why is IE10 (I haven't checked in IE11 and above) rendering value 1, regardless of the value I am passing in, when rendering a progress element using React?

var Hello = React.createClass({
  render: function() {
    return <progress value="50" max="100"></progress>;
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Check out this fiddle - https://jsfiddle.net/co4wz3ft/5/

It works as expected in Chrome and Firefox.

Answer 1

After countless desperate attempts, I found out that inverting the order of the properties (declaring max before value) fixes the issue:

var Hello = React.createClass({
  render: function() {
    return <progress max="100" value="50"></progress>;
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

I assume React was trying to set the value, before setting max, then value would be trimmed to the default max, which is one. But I am still keen to hear a better explanation from someone else!

Answer 2

Hello I've updated your fiddle like this and it seems to work: https://jsfiddle.net/co4wz3ft/11/

var Hello = React.createClass({
  render: function() {
    return <progress value="0.7"></progress>
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

It needs further investigation but you may use it like that right now.