Wrong behave in Safari

[ocavue]

Bug report

Version

vuepress: 0.13.0

Steps to reproduce

I built a repository for this issue:

➜  git clone https://github.com/ocavue/vuepress-issue-example.git
Unpacking objects: 100% (19/19), done.
➜  cd vuepress-issue-example
➜  vuepress-issue-example git:(master) git log --oneline
5443987 (HEAD -> master, origin/master, origin/HEAD) init
➜  vuepress-issue-example git:(master) yarn --version
1.5.1
➜  vuepress-issue-example git:(master) yarn install
✨  Done in 37.75s.
➜  vuepress-issue-example git:(master) yarn run build
✨  Done in 8.91s.
➜  vuepress-issue-example git:(master) cd dist/
➜  dist git:(master) python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/)

I used python3's server in this example. Other http servers should be ok too, because I found out this issue on my github pages (https://ocavue.github.io).

What is expected?

What I expect is what I saw in chrome:

What is actually happening?

In safari, page "333..." repeats twice and page "111..." is missing

Other relevant information

1. I'm not sure if it's a vuepress bug or a safari bug. If it's a safari bug, could someone tell me how to bypass it?
2. I can not repeat this bug in dev mode (yarn run dev)
3. I think vuepress as a combination of something like HEXO and an SPA. In other words, content will be included in both html file and js file. When I open localhost:8000 in safari, I got the correct result at first, which is provided by index.html. And then, after js file is loaded, I got the result in screenshot above.

• Your OS: macOS 10.13.5
• Node.js version: v9.6.1
• Browser version:
  • Chrome: 68.0.3440.75
  • Safari: 11.1.1
• Is this a global or local install?: local install
• Which package manager did you use for the install?: yarn

[ulivz]

See: https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

[ocavue]

Thanks so much! @ulivz

[ocavue]

@ulivz

I still have a question. In your link, the reasons for "avoid v-if with v-for" are:

1. making filtering much more efficient.
2. making rendering much more efficient.
3. making maintenance much easier.

But it didn't explain why I go wrong behave in safari.

[ulivz]

It would be useful for you:

https://stackoverflow.com/questions/4299062/why-wont-safari-5-sort-an-array-of-objects

[ocavue]

The function is expected to return negative, zero or positive depending on whether a < b, a = b or a > b.

In my code, the only results I will return is -1 or 1. And in my example, all date are not the same, so the fact that this function will not return 0 shouldn't be the problem.