Vue: WeChat and Safari render blank page when navigate back in iOS

Created on 21 Jul 2017 · 4Comments · Source: vuejs/vue

Version

2.3.3

Reproduction link

https://github.com/ekoooo/vue-test

Steps to reproduce

(1) 进入主页，滑至最底部，↓
(1) build test project, scroll index page to bottom.
step1

(2) 点击最底部链接进入其他界面，↓
(2) click sub page link.
step2

(3) 点击浏览器返回（这时出现空白界面），↓
(3) click back button and see a blank page.
step3

(4) 其实界面是有内容，可以进行选择，↓
(4) actually, this page have contents, i can select.
step4

(5) 只要界面滑动就会显示，↓
(5) when i scroll this page and the contents show.
step5

useragent

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E304 MicroMessenger/6.5.12 NetType/WIFI Language/zh_CN

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

英语不好，请不要见笑

What is expected?

点击浏览器返回后应该能正常显示
render a complete page when navigate back

What is actually happening?

点击浏览器返回后显示空白（其实有内容），滑动之后才能正常显示
render a blank page when navigate back

Source

ekoooo

Most helpful comment

Hi, my solution is that when these elements that will disappear been rendered, set the scrollTop a number(let browser dispatch the scroll event).Then they will show.
just like this
vm.$nextTick( () => { document.body.scrollTop = 1; })

caoyi5225 on 31 Jul 2017

👍6

All 4 comments

Could you please remove the images (or make them smaller) and include steps to reproduce as well as a description of the bug, please? Bonus points if it's in English 😁