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

然后我试了

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

相关推荐
练习前端两年半6 小时前
🚀 Vue3按钮组件Loading状态最佳实践:优雅的通用解决方案
前端·vue.js·element
1024小神6 小时前
vue3项目使用指令方式修改img标签的src地址
前端
sujiu6 小时前
CommonJS 原理与实现:手写一个极简的模块系统
前端
用户51681661458417 小时前
使用全能电子地图下载器MapTileDownloader 制作瓦片图层详细过程
前端·后端
拉不动的猪7 小时前
从底层逻辑和实用性来分析ref中的值为什么不能直接引用
前端·javascript·面试
1024小神7 小时前
tauri项目编译的时候,最后一步的时候内存溢出了?
前端
ONE_Gua7 小时前
Wireshark常用过滤规则
前端·后端·数据挖掘
通往曙光的路上7 小时前
vue啊哈哈哈哈哈哈哈哈
前端·javascript·vue.js
郑叔敲代码7 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
fouryears_234177 小时前
如何将Vue 项目转换为 Android App(使用Capacitor)
android·前端·vue.js