IOS 12(iphone 6) 显示 vue 页面白屏(空白、被遮挡、被页面背景遮挡),z-index 无法很好的适配
场景
订单追加金额表单,切换类型时,将显示/隐藏部分字段,发现切换类型后,页面显示空白,但是在大约的位置点了下,发现按钮依然可以点击,也就是说页面已经渲染完成,只不过被遮挡了。
页面空白,并不是纯白,而是被背景遮挡。
![f45dba7d305905a061c154366fed0a5b2](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
问题总结
同时符合以下三种情况会出现上述问题
- 节点样式设置了 z-index 为负数
- 节点或父级设置了 v-if 切换,并且在切换后出现页面白屏
- 内容超出页面高度
解决方案
z-index 设置 >= 0 的值
Edited by liuyajun