Vue: iOS Safari renders blank page

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

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

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?

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.

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?

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

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.

Your iOS version?

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

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

Repros on iOS Safari.

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

@Centaur Have you found a workaroud?

@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.

yeah, do you resolve this problem ? @cherry-geqi

@ppxialetsgo The workaround provided by @Centaur just works. This is obviously not an individual case. I suggest vuejs team pay more attention on this. @yyx990803 @posva

+1 Exactly the same problem.

100% reproduced on iOS 9/10/11 + wechat(WKwebview)/safari. Can't reproduce in UIWebview of wechat.

The above workaround works for us.

We are considering Vue for our new project but this thread seems very similar to what I am seeing. Our primary users wont be having the latest phones and I see that sample Vue apps simply don't render on IOS (7.1.2) Safari => IPHONE-4.

Reproduction:
The vue demo here does not render on IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

But the equivalent React component does:
https://danilowoz.github.io/react-content-loader/

Please advise.

i have the same problem

I have the same problem.

I have the same problem.

It's actually an issue related to Safari instead of Vue, check out this demo which doesn't involve with Vue.

Great! @javoski 's demo indicates the issue is not related with Vue but Safari.

@Hao-Wu @javoski , I disagree with you with the Safari part, I tried with Google Chrome in my Ipod touch and it also renders the same

@javoski . It says in the web inspector that you have an error as shown in the photo

Seems like the "tick" is not read properly

Hey guys ,I had the same problem.but now I solved my problem.
i found out that my problem was due to the structure of the dom tree

in my case, there are two nested HTML elements.

I think it's because this makes the frame render wrong.

I don't know if I had exactly the same issue, but I had a problem that sounds pretty close to this. The solution for me was to install babel-polyfill. So, for future people Googling this issue that might be an option that helps.

Thanks for your workaround @Centaur !!!
You saved me hours of debugging... Thank bro.

the same problem happens on react, if the element use '-webkit-overflow-scrolling: touch', it won't be rendered on return in my case.

so , how to solve the problem finally except scroll method? I also encounter the problem on react...
@cherry-geqi @Centaur @posva

虽然这个问题解决了，但我还是想说，这不叫ios问题，而就是vue的问题，如果你非要说是ios问题，那如果出了安卓的问题，是不是也不是vue的问题？那还有谁来用vue?
you are five

The issue still exists on Safari iOS 12.

@Centaur fix worked, you just have to find the main scrolling element. For my case it was a div inside body element.

虽然这个问题解决了，但我还是想说，这不叫ios问题，而就是vue的问题，如果你非要说是ios问题，那如果出了安卓的问题，是不是也不是vue的问题？那还有谁来用vue？
你五岁

你是sjb?

vue中可以使用

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
   return {y: 0}
  }

# my problem is…

Vue in ios safari , When the right slide back to the home page , the page will be blank ， Then show the contents of the previous page， finally comes the content of the home page ；

In addition: It's not just back to the home page that has this problem， this phenomenon also exists on other pages ;

# how did I solve it

Abandon the Vue Transition ， emmm 太难了