-webkit-overflow-scrolling: touch;属性会导致苹果上z-index失效

X_小七 2018-12-17 03:49:01

最近发现一个很奇葩的问题,就是在页面上加上 -webkit-overflow-scrolling: touch;属性后,在安卓上的z-index是有效的,但在苹果上的z-index却始终没有效果,很奇怪

...全文

448 回复打赏收藏举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

记笔记，免忘记！ios苹果手机，多个position:fixed导致层级关系失效，弹窗无法显示。怎么调试都无法实现，部分苹果手机不会出现此问题。首先，排除了浮动等会导致出现这个问题的情况。后网上百度了下，说是从父原则但是我按照这篇文章的说法修改样式js还是无效。因为是z-index属性失效导致了该问题，如下是正确解决了我此时的问题的方法方法一：页面上加上 iOS的弹性滑动属性-we...

在一次用h5实现app页面功能中，ios系统发生如下bug 问题整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。然后查了一些资料，其中看到如下博客，才解决了问题https://blog.csdn.net/zilvzsy/article/details/...

在一次用h5实现app页面功能中，ios系统发生如下bug 问题整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。然后查了一些资料，其中看到如下博客，才解决了问题 https://blog.csdn.net/zilvzsy/article/details/86022612 最主要的原因是全局样式-webkit-overflow-scrolling属性设置

经常会有这样的需求：点击某个按钮或图标，能打开一个类似信息提示作用的弹窗。弹出的内容是高亮的，其余部分变暗，也就是有一层遮幕div，它的层级在其他dom元素之上、在高亮部分之下。但是有一天我却遇到下面这种情况：左边本应该像右边一样，遮幕的作用是覆盖掉除公告以外的内容，包括头部提示和底部按钮。奇怪的是，第一‘z-index’设置没有问题，第二遮幕层级失效的情况只有在ios手机上才会出现。于是百度了一圈找到了问题所在。为了提高移动端的体验感，全局scss上定义了 -webkit-overflow..

61,117

社区成员

60,701

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章