iOS Safari renders blank page

[cherry-geqi]

Version

2.2.6

Reproduction link

https://gist.github.com/cherry-geqi/68b3b83491394851f94d8364ab099a83

Steps to reproduce

1. Scroll list page a distance over the height of the screen
2. Click a cell and navigate to detail page
3. Navigate back and see a blank page
4. Swipe the list page and the contents show

What is expected?

A complete list of contents

What is actually happening?

A blank page without contents until you swipe on the page

---

Reproduces on iOS Safari (tested on iOS 10.3.1).
Works on Chrome for iOS even though it uses the same engine.

[phanan]

Even though I can't reproduce, this apparently is a problem with Safari's back-forward cache and not Vue itself.

[posva]

Should we close this then?
@cherry-geqi Next time make sure to provide an interactive repro and editable repro, like a jsfiddle 🙂 It really helps, even more with mobile issues

[cherry-geqi]

I'm sorry but I can not provide a jsfiddle repro so it may take a few more steps to repro. The gist is a minimum complete one. To repro, download the gist and then put it under the root directory of a temporary server like python3 -m http.server and then request from iOS Safari.

In my device, it is almost a 100% repo.

Here is a screencast:
blank-page-repro.zip

It may be a problem with Safari, but we should provide a workaround, should we?

[yyx990803]

I think this is actually because... you are re-fetching the data every time you navigate to home. You should use a store to cache the fetched data.

[cherry-geqi]

I'm afraid not. Maybe I didn't make myself clear but it is really a fatal problem which only repros on iOS Safari. When I navigate back, the page stays blank until interacting with it. The data is loaded and the DOM is constructed. It's more like a browser rendering bug but is there something we can do?

[yyx990803]

Cannot reproduce on iOS 10.3.1 using the exact code you provided.

[cherry-geqi]

It's a 100% repro. Scroll the list page(important!) and navigate to detail page and navigate back. I have been working on this for 20 hours at least.

[yyx990803]

Your iOS version?

[cherry-geqi]

iOS 10.3.1 along with Wechat 6.5.7 as it switched to WKWebview since 6.5.6.

[yyx990803]

You should've mentioned that - Safari is NOT WKWebView.

[cherry-geqi]

Repros on iOS Safari.

[Centaur]

Yes. This is a problem that is 100% reproducible on ios（WeChat, Safari, at least）for my app as well. Vue 2.3.3.

[cherry-geqi]

@Centaur Have you found a workaroud?

[Centaur]

@cherry-geqi I added the following code after the data fetch:

this.$nextTick(() => {
      window.scrollTo(0, 1)
      window.scrollTo(0, 0)
})

At least our test team was satisfied.