uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题

发现子组件中的弹窗在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看到一个

然后我试了

发现解决了,具体原因不清楚,希望对你有帮助,可以两者都试试

相关推荐
excel几秒前
Vue 编译器中 walkIdentifiers 源码深度解析
前端
excel1 分钟前
一文看懂 Vue 编译器里的插槽处理逻辑(buildSlots.ts)
前端
excel3 分钟前
Vue 编译器源码解析:错误系统(errors.ts)
前端
kilito_014 分钟前
uniapp主包使用子包的图片 真机会显示不出来
uni-app
余道各努力,千里自同风5 分钟前
uni-app 请求封装
前端·uni-app
excel8 分钟前
Vue 编译器核心 AST 类型系统与节点工厂函数详解
前端
excel8 分钟前
Vue 编译器核心:baseCompile 源码深度解析
前端
fakaifa8 分钟前
XYcourse课程预约小程序源码+uniapp前端 全开源+搭建教程
uni-app·php·源码分享·源码下载·xycourse·课程预约小程序
excel9 分钟前
Vue 编译核心:transformMemo 源码深度解析
前端
excel11 分钟前
Vue 编译核心:transformModel 深度解析
前端