webview H5 兼容性汇总(持续更新中)

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%

4 iOS问题 ：iOS 底部设置margin-bottom无效

解决方案。 margin-bottom 换成 padding-bottom

🌰例子

.box{
   margin-bottom: 148px;
}

改成

.box{
   padding-bottom: 148px;
}