IE10,IE11和edage浏览器下首次渲染出的progress的value属性无法正确渲染

[nqdy666]

Version

2.3.3

Reproduction link

https://new-issue.vuejs.org/

Steps to reproduce

https://jsfiddle.net/nianqin/3j0o7uvh/

What is expected?

期望progress标签的value属性能够正确渲染

What is actually happening?

必现

[Jinjiang]

I found it works if we set max first and value later. But value first will fail. In your case the value always be set at first so it doesn't work as expect.

demo: https://jsfiddle.net/r5gohw4w/ (foo doesn't work but bar does)

[yyx990803]

This should've been fixed in 2.4.3: #6561

[Jinjiang]

I'm using 2.4.4, reproduced.

[Jinjiang]

My current UserAgent is "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063".

I guess it's because this line doesn't run: if (isIE9 && attrs.value !== oldAttrs.value) { ... } at

vue/src/platforms/web/runtime/modules/attrs.js

Line 46 in 2deda3d

if (isIE9 && attrs.value !== oldAttrs.value) {

It works in Edge if we changed it into if ((isIE9 || isEdge) && attrs.value !== oldAttrs.value) { ... }. But same as @sqal said in #6561 (comment) I am not sure about this very much.

Thanks.

[Jinjiang]

Well, a little more study about this. It seems that in this demo: https://jsfiddle.net/r5gohw4w/ IE/Edge is correct to W3C HTML spec and Safari/Chrome is wrong.

As https://w3c.github.io/html/sec-forms.html#the-progress-element says:

if the parsed value was greater than or equal to the maximum value, then the current value of the progress bar is the maximum value of the progress bar.

So for foo in the demo if we set 50 to value first (before setting 100 to max), the current value (50) is greater than the maximum value (1.0). So the current value will be set as 1. And then we set 100 to max so at the end the position of the <progress> element should be 1/100.

Anyway it doesn't mean the syntax in Vue template is wrong or correct. Just about browser implementations.

... and seems that using if (attrs.value !== oldAttrs.value) { ... } directly without browser detection matches the spec.

Thanks.

[yyx990803]

I think this is related to how browsers handle updates. Non-IE browsers seem to resolve the values after the current JavaScript event loop, while IE resolves as soon as the attribute is set. I am keeping the if block for IE/Edge only for now because I don't think the spec actually mandates how this should be handled when setting attributes sequentially.

[Jinjiang]

Agree. Actually there is already an issue whatwg/html#3066 to follow. I will keep watching this.