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%