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.

[91Cola]

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

[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

[Hao-Wu]

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

[TimeBandit]

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.

[zxb5102]

i have the same problem

[lizhiyao]

I have the same problem.

[trsoliu]

I have the same problem.

[javoski]

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

[Hao-Wu]

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

[Dean-Christian-Armada]

@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

[Dean-Christian-Armada]

@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

[zxb5102]

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.

[kschroeder]

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.

[francistec]

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

[OPY-bbt]

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

[XieChuanfang]

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

[icemancrem]

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

[Vnext-HoangBui]

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.

[3344567]

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

你是sjb?

[fengyuyizai]

vue中可以使用

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

[PLQin]

# 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 太难了

[wanghansong]

the seam problem i have met

[timgoeller]

This happend in a PWA for us, and was caused by using router.go(-1).

[imki123]

In my case, I solved it with window.history.scrollRestoration = 'manual'.

[jkira]

This is still a problem with mobile iOS in 2023. So it goes. Here's a vanilla JS version for anyone with non-Vue pages.

window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        console.log("scrollfix");
        window.scrollTo(0, 1);
        window.scrollTo(0, 0);
    }
});

[charliech17]

I also face the same issue both on nuxt2 and nuxt3 project.
(My iPhone version is iOS 16.2.)
After sometime searching on google,
I realize it is ios inertia/momentum scrolling issue.
While page is scrolling and the same time you navigate to another page(maybe press a button to navigate)
then the page will be blank.

And finally I find below link solution:
https://stackoverflow.com/questions/16109561/force-stop-momentum-scrolling-on-iphone-ipad-in-javascript#

The solution is simple: Before you navigate to another page, you need to set overflow hidden on your scroll body. and after that, remove the hidden property. The sample code is below:

 const scrollSection = document.getElementById('YOUR_SRCOLL_SECTION_ID') 
scrollSection.style.overflow = 'hidden'

// after page router finish....
scrollSection.style.overflow = ''

In below Nuxt3 example, I use beforeEach and afterEach in app.vue file

const scrollSection = document.getElementById('SCROLL_SECTION_ID')

useRouter().beforeEach(()=> {
     scrollSection.style.overflow = 'hidden'
})

useRouter().afterEach(()=> {
        nextTick(()=> {
            scrollSection.style.overflow = ''
        })
    })

A demo is here:
https://frontend-sideproject-learning.netlify.app/testscrolwhite/