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: sca