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

ssr unexpected hydration bailout with <pre> tag #5992

Closed
FranckFreiburger opened this issue Jun 28, 2017 · 4 comments · Fixed by #6022
Closed

ssr unexpected hydration bailout with <pre> tag #5992

FranckFreiburger opened this issue Jun 28, 2017 · 4 comments · Fixed by #6022
Labels

Comments

@FranckFreiburger
Copy link

FranckFreiburger commented Jun 28, 2017

Version

2.3.4

Reproduction

Here what happens on F5 (reload) key:
ssr_pre_tag_issue
(It happens only once, the video is looped)

Steps to reproduce

Add a <pre> tag in App.vue of the vue-hackernews-2.0 demo:

<template>
  <div id="app">
    <header class="header">
    <pre style="background-color: #aaa">
foobar
    </pre>
      <nav class="inner">

What is expected?

client-side and server-side have the same version for the <pre> tag

What is actually happening?

client and server side versions are not the same, then bailout ?, then <pre> tag content is flickering

@defcc
Copy link
Member

defcc commented Jul 1, 2017

Thanks @FranckFreiburger , I try to reproduce the issue on Mac and windows, both ok. Will you please provide more information? And for F5 key, what do you mean it by that, F5 to reload the page?

@FranckFreiburger
Copy link
Author

Windows 7, node v8.1.2, tested with latest Google Chrome & Firefox.
After cloning vue-hackernews-2.0 demo, I just modified the App.vue to add the <pre> tag.
Then I run npm run dev, and the first time the page is loaded, the issue happens (and the issue happens again on page reload)

Using google dev tools,
When I pause the script execution just before the issue, the markup (in the dev tools Elements tab) is:

<pre style="background-color:#aaa;">foobar
		</pre>

When I continue the script execution, the markup become:

<pre style="background-color:#aaa;">
foobar
		</pre>

The data from the network tab seems correct, the initial HTTP GET request contains:

<pre style="background-color:#aaa;">
foobar
		</pre>

note: the issue does not happens with <div style="white-space:pre;"> instead of <pre>

@defcc
Copy link
Member

defcc commented Jul 2, 2017

Thanks, got it. I am trying to look into it.

@defcc
Copy link
Member

defcc commented Jul 3, 2017

@FranckFreiburger This seems to be a bug. According to the specification https://www.w3.org/TR/html5/syntax.html#element-restrictions

A single newline may be placed immediately after the start tag of pre and textarea elements. If the element's contents are intended to start with a newline, two consecutive newlines thus need to be included by the author.

The first line break immediately following the pre tag is ignored, while the vue html compiler seems not.

I'll try to fix it.

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

Successfully merging a pull request may close this issue.

2 participants