ios 内嵌h5页面 闪屏问题

在h5做webview，遇到一些问题，如果有遇到同样的问题的小伙伴，欢迎留言交流

1. 闪屏问题

在ios app点击进入h5页面的时候，会出现闪屏问题

• 首先ios工程师做了加载前的处理，完美的解决了一种闪屏问题；

• 但是，iphone7、8还出现了闪白屏问题，经过多个页面对比发现，是布局中body有背景图片导致的个别手机闪屏，处理办法就是，将图片加载完毕后显示，这样没有很严重的闪屏问题，图片会延迟1s出现；

var img = new Image();
img.src = "./images/bg@2x.png";
img.onload = function () {
    $('body').css("background-image","url(./images/bg@2x.png)")
}

• 在移动端IOS，点击屏幕会出现闪屏的效果，如何去除闪屏，网上有说需要设置

html, body {  
  -webkit-tap-highlight-color:rgba(0,0,0,0); 
}

上面方式都处理后，发现iphone7 比较严重，首次进入会白屏，偶尔会闪白，页面已经处理的很简单了，我的页面是外链形式的，不知道服务端渲染会不会好些

2. 布局

在布局上ios 内嵌的h5页面，下拉会滑动回弹，这样回弹会显示原本app提供的背景色/图片，设计的时候要考虑这块的协调性；

整体页面不是纯色，例如在设计上内容部分和body的颜色不同，为了美观设计这样设计的，问题是，iphoneX app 中会自动把底部安全距离保留出来，这样，底部内容的颜色就不能平铺到底部的安全距离，下拉到底会出现分格色；

针对不同UI，移动端上，滚动部分最好是默认的body，如果是content，会出现触摸失焦滚动不动的现象！