微信公衆号開發 用vue做前端頁面 解決IOS傳回白屏問題

原文連結位址

問題描述：

進入A頁面——>B頁面——>ios自帶的傳回——>白屏出現——>手動點選白屏處——>問題解決

原因分析: 

在ios機器上使用webview開發Vue項目時候，go history(-1)， 無法将body的高度拉掉，使得遮住，觸發輕點選，方可消除遮罩

解決方案實作原理：

html，body都是100%，#app撐起了父元素的告訴，但是浏覽器預設的滾動scroll并不是#app，而是body,某些因素，造成傳回history 後，無法複原（ios 的鍋），為此，我們将#app 進行了絕對定位，并讓它重新成為 scroll 的對象，進而解決問題

實作代碼：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#app {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}
           

設定以後頁面無法滾動的解決辦法（這裡就拿container舉例，具體類名以實際情況為準）

.container {
 width: 100%;
 height: 100%;
 background: #fff;
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
 position: absolute;
 left:0;
 top:0;
}