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看到一个

然后我试了

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

相关推荐
秋名山大前端2 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug2 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn2 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636023 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4163 小时前
HTML(面试)
前端
excel3 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴3 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
专注API从业者3 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王3 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html