Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
busheezy opened this issue Sep 10, 2017 · 12 comments
Closed

Comments

@busheezy
Copy link

busheezy commented Sep 10, 2017

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
Copy link
Member

posva commented Sep 10, 2017

It works nicely for me (copied your code into a fiddle: http://jsfiddle.net/hhrby3sg/ because a project for that is an overkill)
screen shot 2017-09-10 at 12 59 00

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

@posva posva closed this as completed Sep 10, 2017
@busheezy
Copy link
Author

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 busheezy changed the title v-bind:value fails in internet explorer 11 <progress> value attribute fails while in Vue document on internet explorer 11 Sep 10, 2017
@busheezy
Copy link
Author

busheezy commented Sep 10, 2017

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

@posva
Copy link
Member

posva commented Sep 10, 2017

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
Copy link
Author

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
Copy link
Contributor

sqal commented Sep 11, 2017

@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

const acceptValue = makeMap('input,textarea,option,select')

Btw. Edge has the same problem ;)

@posva posva reopened this Sep 11, 2017
@posva
Copy link
Member

posva commented Sep 11, 2017

@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
Copy link
Contributor

sqal commented Sep 11, 2017

@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

if (isIE9 && attrs.value !== oldAttrs.value) {
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
Copy link
Author

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

@posva
Copy link
Member

posva commented Sep 11, 2017

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

@yyx990803
Copy link
Member

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
Copy link
Author

Should this be working on 2.4.4?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants