IOS 的z-index 失效的原因

最新推荐文章于 2025-01-17 10:56:03 发布
转载 最新推荐文章于 2025-01-17 10:56:03 发布 · 5.1k 阅读 · 0
文章标签：

#IOS #z-index #兼容 #安卓

本文揭示了一个iOS开发中容易忽视的问题：使用-webkit-overflow-scrolling:touch属性时，可能导致z-index属性失效。作者通过实际调试经验分享了解决这一难题的方法。
微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】
weixin_42289080的博客
09-22 3420
一、这是模拟器上的效果 二、这是苹果11真机上的效果（安卓真机正常） 三、先来理一下代码的层级现状 A 为van-tabs B 是自定义组件，为数据列表，C为单个数据 D 也是自定义组件（图中省略）为单个数据详情弹窗，且D是B的子组件！ 在z-index层级上 A是相对定位，B、C无定位，所以A>B D设置z-index 9999 但不生效 四、理清楚之后，有一个大胆的猜想： B、D均为自定义组件，且D是B的子组件，会不会导致D的层级最高只能和B一样高？导致不能穿透B，所以被A组件盖住
关于z-index 层级显示 ios端不生效问题。
01-03
项目构建 webpack + vue + vue-router + vueX + axios + antd of vue 起因 构建项目的时候由于 采用的 antd of vue ui库 ，里面没有类似点击唤醒遮罩层的组件 ，所以自己手写vue组件进行引入 ，主要用的是 css3 z-index 属性 ，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求 ，由于用的是vant-ui）里面有自带的组件 所以就引入直接拿来用了。 经过 自认为写的写的代码上面逻辑是没有错误的，可结果却是 以下 。。。。 出现弹窗的时候，滑动底部z-index 属性不起作用。 更令人无语的
iOS端z-index属性配置不生效
ice_cream__的博客
08-16 1091
同样的z-index，iOS上不生效，没有按照指定的层级展示。
在ios上z-index不起作用问题的总结
时清云的博客
01-11 2404
最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：
iOS---z-index失效导致的原因
細水、長流√的专栏
10-17 8679
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效 转载于：https://my.oschina.net/yjjjjjj/blog/993805
ios系统设置z-index不生效问题
weixin_46548238的博客
09-06 2352
两个盒子一个是侧边栏，一个是底部按钮，二者都是fixed固定定位。需求是侧边栏的层级要高于底部按钮，侧边栏z-index: 999，底部按钮z-index: 2。此时ipad上底部按钮的层级仍会高于侧边栏。适配ipad端时发现z-index属性在电脑调试生效，而在ipad实机上不生效。解决方法：在侧边栏加上css代码如下。
ios设备下，scroll-view组件的子元素z-index失效
最新发布
07-11
在 iOS 设备下，`scroll-view` 组件的子元素 `z-index` 样式失效的问题是由于 `-webkit-overflow-scrolling: touch` 属性导致的。此属性会在 iOS 的 Safari 浏览器中创建一个独立的渲染层，从而破坏了常规的层叠顺序...
微信小程序 ios z-index
04-23
`z-index` 的失效可能由以下几个原因引起： 1. **层叠上下文未正确建立**：如果父级容器没有设置定位属性（如 `position: relative/absolute/fixed`），子元素即使设置了较高的 `z-index`，也可能不会生效。 2. **...
z-index属性在什么情况下会失效?
06-24
在 iOS 设备上，z-index 可能由于渲染引擎的限制而失效。为了确保兼容性，可以为相关元素添加 `transform` 属性[^4]。 **解决方案**： 通过添加 `translateZ` 或其他 `transform` 属性强制触发 GPU 渲染。 ```css ....
前端调试：记Iscroll4 疑难杂症之z-index失效
weixin_33963189的博客
07-12 404
前言 用了一个很大的词“前端调试”，事情是这样的，这两天一直在解决一个bug，我们用iscroll做了一个下拉刷新的产品列表页面，总会出现页面渲染错乱的问题，只要用js动态修改html或者在浏览器开发者工具中修改css、html就会恢复正常。 本来想分享一下iscroll的问题，避免大家走弯路，后来索性把我们定位问题的方法和过程也记录了一下。 页面效果 调试工具修改 目录 前言 以往诡异问题...
IOS safari浏览器中出现的z-index不生效的层级问题
alokka的博客
01-17 348
在safari浏览器中有个独有的属性 ，就是弹性滑动：-webkit-overflow-scrolling: touch。如果使用了这个属性，也会造成z-index不生效。解决方式更加简单，设置成unset即可。
小程序中，iOS端z-index不生效的问题解决方法
m0_58109494的博客
06-13 1626
ios端小程序中，CSS设置了position，z-index依然会出现不生效的情况。在CSS中添加以下代码。
uni-app_scroll-view_ios端_组件内部z-index失效处理
m0_37602317的博客
05-12 2299
uni-app scroll-view ios端 组件内部z-index失效处理 主要原因 <scroll-view> 内部设置了 -webkit-overflow-scrolling: touch 样式，导致z-index失效（safari 3D变换会忽略z-index的层级问题）造成内部组件的弹出框显示遭到遮挡 <template> <uni-scroll-view v-on="$listeners"> <div ref="wrap"
z-index 在 iphone ios 无效的bug
高先生的猫
02-25 1082
场景重现:在微信开发者工具可以正常显示,在安卓真机手机可以正常显示,在ios手机真机无法正常显示，虽然内容有，但是看不见 原因:子元素position:fixed;父元素position:fixed;，只需要将父级的fixed去掉或者子级的fixed去掉即可 ...
ios端 z-index不生效问题
weixin_47541876的博客
05-07 3942
安卓使用z-index层级没有问题，但在ios端不生效，比如多个模态框使用z-index时，高层级的z-index始终不能覆盖上来 解决办法： 在该元素上添加如下css样式 transform:translateZ(1px); 给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。 ...
iOS z-index属性失效
南宫辞迁
08-11 654
iOS的弹性滑动属性 -webkit-overflow-scrolling: touch 会导致 z-index 属性失效 加 transform:translateZ(1px);
关于移动端ios底部区域z-index部分生效 页面撕裂问题
Yaince的博客
05-31 416
总结：方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。
一次解决ios中z-index属性失效问题的经历
id_ip的博客
06-03 4175
在一次用h5实现app页面功能中，ios系统发生如下bug 问题 整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。 然后查了一些资料，其中看到如下博客，才解决了问题 https://blog.youkuaiyun.com/zilvzsy/article/details/86022612 最主要的原因是全局样式-webkit-overflow-scrolling属性设置
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值