iOS WebView加載網頁觸摸白屏bug排查及修復打賞

最近兄弟團隊給提了一個bug,說他們iOS端的網頁,觸摸后很大幾率出現白屏,一開始我是很不信的,后面本地調試竟然更高概率發生。

首先,系統是iOS10、11,網頁是高度100%,中間部分越界滾動的一個常規效果,框架vue,不過感覺bug和vue關系不大,大概結構如下:

<body>
	<div id="app">
		<header class="page-header"></header>
		<div class="page-content"></div>
		<footer class="page-footer"></footer>
	</div>
</body>

由于希望得到平滑點的滾動,在中間滾動部分加了

.page-content {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    ...
}

本來表現很正常的東西,突然出現白屏,而且是頁面觸摸就白屏,測試了好幾部手機,個別是白屏后一直白著,個別是白屏后過半秒左右又自動恢復正常,有些不解,但看樣子有點像是重繪或者重排導致的。

網上找到類似介紹如下:

webkit在繪制頁面時會將結構分為各種層,當層足夠大時就會變成很大的平鋪層。這樣一來webkit在每次頁面結構發生變化時不需要都渲染整個頁面而是渲染對應層了,這對渲染速度來說相當的重要。webkit會給各種層分配一定大小的“后備存儲器”在內存里緩存起來,這就是繪制層的上下文,通過這個上下文就可以很容易的實現各種效果(動畫,3D變換等),“后備存儲器”內存占用大小不僅依層而定,跟設備和顯示方式也是有關的,假設這在普通屏幕下是1:1的,但在Retina屏幕下則是1:2的,并且放大時這個量會成倍增加;一張圖片是10X10,普通屏幕分配的就是10X10,Retina初始則是20X20。這也表明Retina是更加消耗內存的。當層很大時,意味著“后備存儲器”會消耗更大的內存,為了避免這點,webkit并不會繪制一個很大的層來存儲一個很大的頁面,比如說平鋪層則會拆分成很多的塊來繪制,即盡占用盡可能小的內存,只是將可視范圍內的那部分渲染出來。這就是為什么我們在大頁面滾動時會發現下面的內容慢慢顯示,向上滾動時上面的內容還慢慢顯示的原因。

以下則是webkit劃分為層繪制的場景:

1、頁面主容器永遠是獨立的平鋪層
2、繪制密集型元素時,如<video>, <canvas>
3、應用3D transformations的元素,包括translate3d, rotate3d, translateZ
4、內容被加強時,如Filters, masks, reflections, opacity, transitions, animations
5、某些特殊的情況下也會,如position:fixed, -webkit-overflow-scrolling:touch
6、任何在已知層上覆蓋的內容

同時,還發現我在中間部分設置了-webkit-overflow-scrolling之外,body元素也加了該屬性,并且也有overflow-x: hidden,因為body和中間部分明顯不在一層,猜測會不會是兩層觸發分層繪制時時機錯開了,抱著試試看的態度,把body上的-webkit-overflow-scrolling、overflow-x: hidden移除,刷新頁面,竟然可以了,而且經嘗試,overflow-x: hidden改為overflow: hidden一樣沒有問題。

不過有文章提及,body設置了-webkit-overflow-scrolling,整個文檔都會生效,而且繼續測試中發現,無論是移除body上的-webkit-overflow-scrolling還是overflow,都可以解決問題,考慮到內容都在body下面作為中間層的div中,為了方便,這里直接將body上overflow移除,保留-webkit-overflow-scrolling,并且要求團隊兄弟不再在body以外的地方使用-webkit-overflow-scrolling,暫時解決了問題。具體根源還沒找到更權威的解釋,暫且記錄一下,如有更深層的解釋,歡迎補充。

參考文章:http://www.iunbug.com/archives/2012/09/19/411.html

iOS WebView加載網頁觸摸白屏bug排查及修復
文章《iOS WebView加載網頁觸摸白屏bug排查及修復》二維碼
  • 微信打賞
  • 支付寶打賞

已有11條評論

  1. hongdou

    只有我一個沒看明白嗎?

    2018-09-06 14:40 回復
  2. 亞克力浴缸

    沒看懂

    2018-01-24 15:55 回復
  3. 福利老幺

    一直都是用的windows.

    2017-11-24 10:37 回復
  4. 游客 579

    原來是這樣嗎

    2017-11-23 13:54 回復
  5. 歷史趣談

    話說我的果6從沒升過級啊

    2017-11-23 12:00 回復
  6. 游客 865

    冬天雖已來臨,祝您四季如春!

    2017-11-21 08:19 回復
  7. 小喵

    言簡意賅

    2017-11-16 10:04 回復
  8. 百度優化教程

    辛虧沒有去升級了,要不然我的蘋果6 就遭殃了

    2017-11-09 15:18 回復
  9. 自閉癥

    對于博主這樣的技術大神只能膜拜之!!!前來支持!

    2017-11-01 20:46 回復
  10. 跨境電商平臺

    言簡意賅,贊一個!

    2017-10-31 10:01 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖