問題描述:一個內嵌IOSAPP的H5頁面,長頁面,大概1.6個屏幕高度,因爲有列表滑動起來很不流暢,因此用了-webit-overflow-scrolling:touch;這個只針對ios端的物理滾動屬性來調整,可是滾動流暢實現了,部分區域由於加了這個屬性出現滑動白屏狀況。原有的html結構也還在就是不顯示。html
調試過程:最開始把問題定位在空白區域樣式問題,包括把overflow所有重置,JS強行展現都沒有效果。最後發現引發滾動的長頁面有一個盒子沒有定義高度,這個高度是由裏面的內容撐開的,因此嘗試給這個列表盒子定了一個高度,果真在滑動的過程當中再也不出現空白區域,最後爲了適配使用彈性佈局,讓列表盒子撐滿剩下的屏幕,而且內部盒子定義高度。ios
結論:使用-webit-overflow-scrolling:touch;這種滑動過程當中出現白屏的狀況,暫時測試出如今小範圍滾動的長頁面,若是是特別長的數據列表測試是沒有出現這個問題。web
tip:這個屬性比較消耗性能,若是對於性能有要求的頁面,不是特別長的頁面能夠用其餘方法實現佈局
完善: 要想正常使用兼容-webkit-overflow-scrolling:touch這個屬性,頂部條底部條最好不要寫固定定位,要否則你將出現時有時無。性能