發現子組件中的彈窗在ios手機上會被限制在scroll-view里面,安卓手機上不受限制,網上找了好久
原因
scroll-view組件內部設置了 -webkit-overflow-scrolling: touch 樣式,導致z-index失效(safari 3D變換會忽略z-index的層級問題)造成scroll子組件的彈出框顯示遭到遮擋
彈性滾動(-webkit-overflow-scrolling):iOS 特有的 -webkit-overflow-scrolling: touch 屬性會創建獨立的渲染層,這個特性會破壞常規的層疊順序,會導致子元素的 z-index 作用域被限制在父容器內(即使設置了更高的 z-index 也無法突破)
網上提供的方法(試了無效)
在微信開發者工具上點擊scroll-view看到一個
然后我試了
發現解決了,具體原因不清楚,希望對你有幫助,可以兩者都試試