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

然后我试了

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

相关推荐
liliangcsdn4 小时前
sentence-transformer如何离线加载和使用模型
开发语言·前端·php
朦胧之5 小时前
AI 编程工具使用浅谈
前端·后端
柳杉5 小时前
HTML-in-Canvas:让 Canvas 完美渲染 HTML 的 Web 新标准
前端·javascript
cTz6FE7gA5 小时前
WebGL实战:用Three.js创建3D场景,实现沉浸式Web体验
前端·javascript·webgl
We་ct5 小时前
LeetCode 69. x 的平方根:两种解法详解
前端·javascript·算法·leetcode·typescript·平方
qq. 28040339845 小时前
数据结构引论
前端·数据结构
daad7775 小时前
WSL2_wifi驱动安装
开发语言·前端·javascript
ZC跨境爬虫6 小时前
Scrapy实战爬取5sing网站:Pipeline优化+全流程踩坑复盘,从报错到数据落地
前端·爬虫·python·scrapy
牛马1116 小时前
Flutter BoxDecoration
前端·javascript·flutter
M ? A6 小时前
VuReact 编译器核心重构:统一管理组件元数据收集
前端·javascript·vue.js·react.js·重构·开源