IOS under the Vue Development front-end Project Click Return page to appear blank __ios

Original article Address

Problem Description:

Enter a page-->b page-->ios return--> screen appear--> manual Click Screen--> Problem Resolution

Reason Analysis:

When using WebView to develop Vue projects on iOS machines, Go history (-1) cannot pull the body's height off, making it obscure, triggering a light click, to eliminate the mask

Solution Implementation principle:

Html,body are 100%, #app撑起了父元素的告诉, but the browser default scrolling scroll is not #app, but the body, some factors, resulting in the return of history, can not be restored (iOS), for this reason, we will #app for absolute positioning, And make it a scroll object to solve the problem.

Implementation code:

[HTML]   View plain  copy 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;  }