webview H5 兼容性汇总(持续更新中)
1 IOS问题：position:fixed固定定位抖动问题
问题背景：在业务场景中,在ios终端环境下运行H5页面，需要用到fixed定位，并且fixed定位需要上下移动（y轴移动）
网上解决方案：
① 给顶级元素设置heightL100% ( 并没有奏效 ) 。
② 增加transform: translate(0) 属性 （ 并没有奏效 ）
③ 改变布局由fixed 定位,改成absolute定位，滚动条基于自身。（ 能够从根本上解决偶尔跳屏的问题，但是随之而来的就是ios 滚动条问题，基于document才能有效触发，遂放弃此方案 ）
④ 不改变布局的情况下，由fixed 定位,改成absolute定位，滚动条基于document,定位值完全取决于数据驱动。（能够从根本上解决偶尔跳屏的问题，但是随之而来的就是要不断改变自身的top值 ，导致更新会慢的情况 ，用户体验不好，流畅度欠佳，遂放弃此方案 ）
⑤ -webkit-overflow-scroll:touch解决滑动无惯性（ 并没有奏效 ）
⑥ background-attachment:fixed。（并没有奏效）
解决方案(亲测)：
继续使用fixed定位 抖动不是单纯fixed定位的原因。和频繁改变top值也有很大关系。
放弃改变top值 ，运用 transform: translateY 来使视图上下移动。
2 android问题：border-radius圆角被拉伸问题
问题背景：当我们期望用 border-radius：50%；来绘制圆的时候。 ios没任何问题 ，android上圆角被拉伸，并不圆
解决方案：
我们先把已知视图宽高变成2倍 ,然后用 transform: scale(.5) 让视图缩小50% ,就可以在 android得到很圆的效果。
🌰例子：
{
border-radius:50%;
width:10px;
heigth:10px;
}
变成->
{
border-radius:50%;
width:20px;
heigth:20px;
transform: scale(.5);
}
3 android问题：1px 在安卓的个别手机上显示不出来
解决方案： 在内联样式中写2px ， 然后用transform: scaleY(0.5) 高度缩放50%