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.

Sign up for GitHub

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

Jump to bottom

:style with multiline attribute removes root element in all versions of IE #3663

Closed
danieldiekmeier opened this issue Sep 12, 2016 · 5 comments
Closed

:style with multiline attribute removes root element in all versions of IE #3663

danieldiekmeier opened this issue Sep 12, 2016 · 5 comments

Comments

@danieldiekmeier
Copy link

danieldiekmeier commented Sep 12, 2016 •
edited

Vue.js version

2.0.0-rc5

Browser

Internet Explorer 10
Microsoft Edge

Reproduction Link

http://danieldiekmeier.de/vue/1.html // This one doesn't show anything
http://danieldiekmeier.de/vue/2.html // This one shows "Hello" in Red, as expected

Steps to reproduce

This is the HTML that does not work:

<div id="app">
  <div
    :style="{
      'color': 'red'
    }"
  >
    Hello
  </div>
</div>

This is the HTML that does work:

<div id="app">
  <div
    :style="{'color': 'red'}"
  >
    Hello
  </div>
</div>

This is the JavaScript:

new Vue({
  el: '#app'
})

What is Expected?

image

No matter if I enter the :style attribute in multiple lines or not, it should always work the same. (It also works in both cases if I use Vue v1).
In Chrome and Firefox, both versions are working.

What is actually happening?

image

(Here you can see the #app div completely missing in the DOM tree.)

When using IE (11, in my case) or Edge, the whole root element (#app) gets completely thrown out of the DOM as soon as Vue starts rendering. This happens regardless of emulated document mode (Edge, 10, 9 all behave the same).

(I was not able to reproduce this bug in a JSFiddle, even when using exactly this code. But in the examples above, it does happen). Here is the fiddle: https://jsfiddle.net/gzd6o9ob/4/
@danieldiekmeier danieldiekmeier changed the title :style with multiline attribute removes root element in IE 10 :style with multiline attribute removes root element in all versions of IE Sep 12, 2016
@LinusBorg LinusBorg added the bug label Sep 12, 2016
@danieldiekmeier
Copy link
Author

danieldiekmeier commented Sep 12, 2016 •
edited

Oh, I tried using the unminified version of Vue and it showed a helpful error:

image

&#10; is the Line Feed Character (according to this source).

So the problem seems to be that IE/Edge transforms the Line Feeds into HTML entities, and the other browsers don't. Hope this helps.

Reproduction with unminified version: http://danieldiekmeier.de/vue/3.html

@posva
Copy link
Member

posva commented Sep 12, 2016

Well, this looks like an IE issue to me 😄
The html spec says you can add whitespace and newlines to attrs. But IE seems to be ignoring this rule.
Having the console error looks enough to me. You can then use a computed property or put it all in one single line.

@posva posva closed this as completed Sep 12, 2016
@posva posva removed the bug label Sep 12, 2016
@danieldiekmeier
Copy link
Author

@posva I thought this was a recent Vue bug because v1.0.26 handles this just fine:

image

So it should be (and certainly was) possible, and this regression seems to be new. Did Vue 2 make fundamental changes to the way attributes are parsed?

Reproduction with uniminfied Vue v1.0.26: http://danieldiekmeier.de/vue/4.html

@posva
Copy link
Member

posva commented Sep 12, 2016

Oh, didn't know it worked on the previous version. Vue 2 is rewritten from scratch and uses Virtual dom to parse templates. Maybe Vue 1 actually handled that.
Can this be fixed easily for Vue 2 @yyx990803 ?

@posva posva reopened this Sep 12, 2016
yyx990803 added a commit that referenced this issue Sep 13, 2016
@yyx990803
handle multiline atribute value parsing in IE (fix #3663)
45ff621
@jakelauer
Copy link

This is happening for me using Edge, Vue v2.4.2

@PhKi PhKi mentioned this issue Oct 25, 2017
Closed
This was referenced Aug 15, 2020
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@yyx990803 @posva @LinusBorg @danieldiekmeier @jakelauer