IOS 的z-index 失效的原因

最新推荐文章于 2024-01-11 18:01:45 发布

转载最新推荐文章于 2024-01-11 18:01:45 发布 · 4.7k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

本文探讨了在iOS设备中，当元素同时设置z-index和translateZ属性时，translateZ优先级高于z-index导致的问题。文章指出在Android与iOS平台下，这两种属性的优先级不同，并提供了解决方案，建议在设置元素时，z-index和translateZ值应一起逐级变化。

罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效

调了超久，还用了safari的真机调试才找出来，心累。。。

IOS下`z-index`失效问题

1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ

2.在ios上，则相反，translateZ的优先级要高于zindex

3.所以最好在设置一系列元素时，zindex的值和translateZ的值应该一起逐级增长或逐级减少

IOS上`z-index`和`fixed`定位无效

在该元素上加：

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

.NET跨平台

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序滚动居中导航选项卡

少吃点肉的博客

02-11

4145

微信小程序头部导航经常会用到选项卡，一个会自动居中的选项卡的体验会比普通的选项卡要好很多。效果示意图：被选中的tab会始终居中显示。利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。 wxml代码：  <image wx:if="{{showMaskScroll}}" class=...

微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】

weixin_42289080的博客

09-22

3412

一、这是模拟器上的效果二、这是苹果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组件盖住

1 条评论您还未登录，请先登录后发表或查看评论

关于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 属性不起作用。更令人无语的

web h5踩坑及解决办法（z-index,滚动到底部，同步滚动等）

C05230的博客

07-06

1421

开发web移动端项目时，遇到的疑难问题及解决

在ios上z-index不起作用问题的总结

时清云的博客

01-11

2388

最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：

iOS z-index属性失效

南宫辞迁

08-11

653

iOS的弹性滑动属性 -webkit-overflow-scrolling: touch 会导致 z-index 属性失效加 transform:translateZ(1px);

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 ....

ios端 z-index不生效问题

weixin_47541876的博客

05-07

3939

安卓使用z-index层级没有问题，但在ios端不生效，比如多个模态框使用z-index时，高层级的z-index始终不能覆盖上来解决办法：在该元素上添加如下css样式 transform:translateZ(1px); 给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。 ...

uni-app_scroll-view_ios端_组件内部z-index失效处理

m0_37602317的博客

05-12

2295

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"

-webkit-overflow-scrolling:touch导致ios中z-index失效(弹窗层级设置无效)

qq_39189369的博客

12-30

2112

解决方法：直接去掉-webkit-overflow-scrolling:touch[不合理，页面卡顿] 弹窗放到根位置，也就是跟遮布平级[根下不存在含有-webkit-overflow-scrolling:touch] 动态修改-webkit-overflow-scrolling:touch的样式值 vant可以使用van-popup，添加teleport(3x)、get-container(2x) 的属性指定位置挂载(原理2一样) ...

IOS下z-index失效问题

ruanhongbiao的专栏

07-12

4142

一.zindex和transform translateZ冲突问题 1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ 2.在ios上，则相反，translateZ的优先级要高于zindex 3.所以最好在设置一系列元素时，zindex的值和translateZ的值应该一起逐级增长或逐...

ios 屏幕滑动时z-index失效问题(android不会出现)

liucai1018的博客

09-07

1110

问题描述：为一块区域设置z-index值，让它在上面；如A区域是2，B区域z-index:3，A和B区域有部分重叠在android上运行时没有问题，但在ios上会出现一个问题：上下滑动的时候，发现A区域和B区域的重叠部分上面为A了原因： ios系统，当滑动屏幕时，z-index失效了，因此导致A-B区域重叠处B被遮挡了解决办法：添加如下：-webkit-transform属性允许我们对元素进行旋转、缩放、移动或倾斜，这里是进行移动，但距离都是0，即可解决问题原因暂时不明..

ios上z-index样式不生效

xiaobaige6084的博客

03-10

2095

用h5在移动端做遮罩式的引导页，但是给元素添加z-index样式时，ios上不生效，不管怎么调整index的值都不行，添加"-webkit-appearance:none"也不行，安卓却正常，查了些资料，找到了原因：只要被添加z-index样式的元素的父元素中有一个父元素带有overflow的样式，z-index就不生效，去掉即可，这好像是css在ios上的bug。 ...

z-index属性什么情况下会失效

weixin_44161385的博客

02-02

1291

z-index失效场景

ios 上滚动优化与 z-index 不兼容问题

flynn_

10-10

880

设置 overflow: auto; 后，在ios环境下，页面滚动会有卡顿的感觉，通过设置-webkit-overflow-scrolling: touch;优化体验。但是这样会导致在其容器内部元素身上的z-index属性就会失效。注意这里指的是其内部元素z-index 失效。也就是说，如果pop层在容器外，那么将不会受到影响。 /*优化ios上的滚动体验*/ -webkit-overflow-scrolling: touch; /*ios环境下：容器添加上面属性，容器内部元素身上的 z-index

前端调试：记Iscroll4 疑难杂症之z-index失效

weixin_33963189的博客

07-12

403

前言用了一个很大的词“前端调试”，事情是这样的，这两天一直在解决一个bug，我们用iscroll做了一个下拉刷新的产品列表页面，总会出现页面渲染错乱的问题，只要用js动态修改html或者在浏览器开发者工具中修改css、html就会恢复正常。本来想分享一下iscroll的问题，避免大家走弯路，后来索性把我们定位问题的方法和过程也记录了一下。页面效果调试工具修改目录前言以往诡异问题...

ios (12.0.1) 中position: sticky属性，导致z-index属性失效

id_ip的博客

06-10

2665

在部分ios系统中(12.0.1) ，h5页面，在元素上设置position: sticky属性进行固定元素，会导致其z-index失效。解决方法：可以将sticky值改为fixed

IOS 的z-index 失效的原因

IOS下z-index失效问题

IOS上z-index和fixed定位无效

IOS下`z-index`失效问题

IOS上`z-index`和`fixed`定位无效