Vue: <progress> value attribute fails while in Vue document on internet explorer 11

[busheezy]

Version

2.4.2

Reproduction link

https://github.com/busheezy/what-am-i-doing

Steps to reproduce

yarn
npm run dev
open link in internet explorer 11 and compare to chrome

What is expected?

<progress value="50" max="100.0">50</progress> assigns value to 50 inside Vue document.

What is actually happening?

<progress value="50" max="100.0">50</progress> assigns value to 1 inside Vue document.

---

Thanks. Sorry if I'm doing something silly.
<progress value="50" max="100.0">50</progress> assigns value to 50 works correctly outside of the app.

[posva]

It works nicely for me (copied your code into a fiddle: http://jsfiddle.net/hhrby3sg/ because a project for that is an overkill)

You may want to ask for help on the forum, the Discord server

[busheezy]

It works for me on jsfiddle as well. I meant to mention that but it was late. I will try Discord again.

The progess bars only don't work when within a .Vue document. I put them outside of the template and they work fine. I guess github isn't the place to get help.

[busheezy]

I edited the original post as I have realized that assigning a number rather a variable does the same thing.

[posva]

I see, I tired and it does happens only with webpack. It's quite strange.... It may be something with the webpack config or vue-loader. Maybe it's being transpiled to drop support with IE

[busheezy]

I appreciate you looking. I was trying to look through vue-loader but I'm not familiar enough. I'm just going to go back to hand rolled progress bars. Thanks again.

[sqal]

@posva actually, I still think this is a bug. Here's why. When you remove dynamic value binding in your example, it stops working in IE11. Looks like the value needs to be added using domProps not attrs

Working example using custom component - http://jsfiddle.net/rgk59d4e/2/

And I guess the progress element check needs to be added here https://github.com/vuejs/vue/blob/a12d32a56df2519c9cdf8d2da9d9425876263f89/src/platforms/web/util/attrs.js#L10

Btw. Edge has the same problem ;)

[posva]

@sqal You're right, it should be a dom prop, since you find the culprit, I'll let you do the PR, I'm unsure if a test is necessary for this, maybe in a compiler test

Thanks a lot btw

[sqal]

@posva hmm I played with this a bit further and turns out the issue is not related to domProps/attrs, because, addingprogress tag to the map doesn't change a thing.

This still works:

<progress :value="value"></progress>

and the value as a string does not:

<progress value="25"></progress>

But when we add in line https://github.com/vuejs/vue/blob/d77b95317cedae299605fb692e2c7c67796b17cb/src/platforms/web/runtime/modules/attrs.js#L46 check for IE/Edge browser, like this (isIE9 || isIE || isEdge) && attrs.value !== oldAttrs.value) then the issue is gone. I am not sure if throwing isIE || isEdge is the correct fix though and won't affect other things, so I think i will leave this issue to someone from the core team to fix ;)

[busheezy]

Thank you very much for looking to this, @sqal. It's always comforting to know I wasn't doing something wonky.

[posva]

mmh, that's really, weird, it should work when using :value.prop="value". I cannot test right now though

[yyx990803]

It only fails when you are using string-based templates. So if you change the fiddle to use a string template instead of in-dom template, it would fail too.

Adding progress to the mustUseProp map does fix it in IE11. @sqal you probably didn't build or import the correct file in your test project.

[busheezy]

Should this be working on 2.4.4?