最近開發移動端，模擬和安卓系統都比較正常，但是一遇到ios系統就各種問題【真難】
前言、背景：
首先是因為設置滾動條ios系統出現卡頓，所以會加-webkit-overflow-scrolling: touch 來解決這個問題
今天遇到的問題是小的彈窗被遮住了，也就是層級不夠，z-index失效。
查了一下資料排除了 z-index “從父原則”導致的問題【父元素沒有設置z-index】
頁面內容點擊彈窗效果圖【這里彈出的ios實機測試是被黑布遮住的，安卓正常】【左側正常效果】【右側圖就是bug效果】
測試發現是page頁面設置了-webkit-overflow-scrolling: touch 導致的【頁面有滾動條】
針對上面的問題，解決方案：
第一種：直接去掉-webkit-overflow-scrolling： touch 【不合理，因為頁面卡頓了】
第二種：把小彈窗放到根下面，也就是跟遮布平級【因為放到根下面就不存在父級含有-webkit-overflow-scrolling】
第三種：動態修改-webkit-overflow-scrolling 樣式內容值。【我選擇解決的方式】
【我是vue項目】
首選給page的div設置ref= receivable
page頁面樣式保持-webkit-overflow-scrolling: touch; 【因為初始化是沒有彈窗，頁面要正常顯示且不卡頓】
當點擊彈窗時設置【在點擊事件方法里調用下面的函數】：
isTure代表一個參數，true表示點擊打開，false表示關閉
【思想】：動態設置webkit-overflow-scrolling樣式，如果點擊了彈窗，頁面都被遮住了，卡不卡都沒關系，所以設置auto，這時z-index有效，彈窗可以操作。
當關閉彈窗時，設置成touch，頁面滑動是正常不卡頓效果。
如果你有更好的方式，歡迎留言一起學習~~^ . ^