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 - /
It works as expected in Chrome and Firefox.
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/co4wz3ft/5/
It works as expected in Chrome and Firefox.
Share Improve this question edited Aug 9, 2016 at 21:17 Hugo Silva asked Aug 9, 2016 at 2:25 Hugo SilvaHugo Silva 6,9783 gold badges28 silver badges42 bronze badges 5- IE 10 should support progress. Maybe, it is ignoring the max attribute. If max attribute is ignored, value should be between 0 and 1. – vijayst Commented Aug 9, 2016 at 3:20
- @Vijay - have you looked at the fiddle? The plain HTML progress renders just fine. Only the React version has an issue. It could be the max attribute being ignored. But why? – Hugo Silva Commented Aug 9, 2016 at 3:26
- I checked the fiddle in Chrome. I don't have IE. Is React rendering the same way in IE or using some sort of polyfill? – vijayst Commented Aug 9, 2016 at 3:51
- 2 can confirm that this also exists in IE11. My suspicion is that the React is doing some funky things to the value attribute – derp Commented Aug 11, 2016 at 5:53
- 1 Seems to works in React v0.14.8 so it could be related to a change in v15.0.0 – HiDeoo Commented Aug 11, 2016 at 12:29
2 Answers
Reset to default 7After 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!
Hello I've updated your fiddle like this and it seems to work: https://jsfiddle/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.