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

然后我试了

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

相关推荐
weibkreuz几秒前
React的基本使用@2
前端·javascript·react.js
于是我说4 分钟前
前端JavaScript 项目中 获取当前页面滚动位置
开发语言·前端·javascript
GISer_Jing4 分钟前
AI在前端开发&营销领域应用
前端·aigc·音视频
Hao_Harrision13 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·react.js·typescript·tailwindcss·vite7
来杯三花豆奶39 分钟前
Vue 2.0 Mixins 详解:从原理到实践的深度解析
前端·javascript·vue.js
code_YuJun41 分钟前
脚手架开发工具——dotenv
前端
QuantumLeap丶44 分钟前
《Flutter全栈开发实战指南:从零到高级》- 26 -持续集成与部署
android·flutter·ios
San30.1 小时前
深度驱动:React Hooks 核心之 `useState` 与 `useEffect` 实战详解
前端·javascript·react.js
Mr_Swilder1 小时前
vscode没有js提示:配置jsconfig配置
前端
skywalk81631 小时前
使用Trae 自动编程:为小学生学汉语项目增加不同出版社教材的区分
服务器·前端·人工智能·trae