Vue-router: In ios, when I return a list page that loads data asynchronously, a white mask appears in the page

[CrazyHuiLiang]

Version

3.0.1

Reproduction link

https://crazyhuiliang.github.io/#/

Steps to reproduce

You can open https://crazyhuiliang.github.io/#/ use iPhone,

when first page opened，This page would fetch the list data async,When the data rendered，you can swipe down 1 or 2 page ( this step is important)

you can clicked an item to jump to a detail page, This page has a go back button named 'click me to go back'

Clicke ''click me to go back'', and the window backed to the list page.

when the list page opened again and the async data rendered, there is a white mask appears in the page

This problem only appear on ios 10 & ios 11.

What is expected?

I hope Vue's contributor's can pay attention to this problem,And give me a explain,The problem may vary important. Thanks!!!

What is actually happening?

Vue and vue-router are used in our project. I have a list of products (list data is loaded asynchronously). Click on the product images in the list and use vue-router to go to the product details page.

If after the user scrolls the list page to the second page,

Then click the product image to enter the product details page, and then click the Back button to return to the product list page, there will be a white mask on the product list page.

---

I captured a video:
https://crazyhuiliang.github.io/video.mp4

source code is here:
https://github.com/CrazyHuiLiang/my-vue-webpack/tree/master/src

[javoski]

FYI https://github.com/vuejs/vue/issues/5533#issuecomment-343864468

[posva]

Sorry I didn't answer the issue right away but please do not open an issue just because I didn't answer back in 2 days, I was planning to.

This is indeed a bug on Safari. Known workarounds are triggering scrolls as soon as you enter the page. I think that using scrollBehaviour to scroll to the top by default may also fix it

[CrazyHuiLiang]

Sorry for open the issue, Thanks!