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

最新推荐文章于 2024-04-16 10:24:53 发布
最新推荐文章于 2024-04-16 10:24:53 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vant 文章标签： ios webkit html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39189369/article/details/122229099
版权

解决方法：

  1. 直接去掉-webkit-overflow-scrolling:touch[不合理，页面卡顿]
  2. 弹窗放到根位置，也就是跟遮布平级[根下不存在含有-webkit-overflow-scrolling:touch]
  3. 动态修改-webkit-overflow-scrolling:touch的样式值

  4. vant可以使用van-popup，添加teleport(3x)、get-container(2x) 的属性指定位置挂载(原理2一样)

一只小药锅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant--------Picker与Popup 选择器和遮罩的完美结合
若如流水 淡淡流过
08-20 3万+
初学前端的小伙伴肯定遇到过这样的问题吧，想写一个下拉，又想写一个遮罩。两个合起来用，然后写一个遮罩height:100%,width:100%,z-index:999,等等去定 繁琐又麻烦 体验感还不一定加 将vant 的picker 与popup集合 方便快捷实用 1.在main.js 里引入 import { Popup } from 'vant'; Vue.use(Popup); ...
postcss-momentum-scrolling:PostCSS插件添加“动量”样式的滚动行为（-webkit-overflow-scrolling
04-21
插件，用于为iOS上具有溢出（滚动，自动）的元素添加动量样式滚动行为（ -webkit-overflow-scrolling:touch ）。 例子 /* Input example */ . minicart { overflow : scroll; } /* Output example */ . minicart ...
ios下使用-webkit-overflow-scrolling出现卡顿无法滑动的bug解决
安静先生的博客
07-05 1万+
现在做的小程序项目需要适配iphoneX,所以不再使用page自身的滚动，需要在判断是iphoneX机型下把view底部留白34px;34px是避开iphoneX底部的操作范围，以下代码同样适用H5。实现方法：最外层用content包裹滚动，默认情况下滑动时手指松开即停止滑动。为了实现顺滑滚动，加上这句代码：-webkit-overflow-scrolling: auto | touch;auto...
ios下使用-webkit-overflow-scrolling:touch带来的bug
weixin_40398051的博客
12-22 1126
在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位.1 设置你需要滚动的div的position: relative; -webkit-overflow-scrolling: touch;以及高度 2，底部就用absolute 来定位，这样就不会随着滚动了。
关于 -webkit-overflow-scrolling:touch 的小bug
pan396365044的博客
12-30 9158
最近在写页面时遇到一个页面长度刚刚超过手机高度一点，所以页面这时是可以上下滑动的，在安卓手机上滑动很流畅，但是在苹果手机上下滑动时会出现卡顿回弹等现象导致不流畅；故我给body加了body{ -webkit-overflow-scrolling:touch; } 此时苹果手机滑动也流畅了，但是带来一个bug，页面中我有一处弹窗，弹窗的高度是刚好100%的，而且弹窗出现底部内容是不能滑动的，
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）
最新发布
m0_55074611的博客
04-16 554
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为；解决方法一：把需要fixed定位的元素放在scroll-view外面，方法二：在**全局**（注意是在全局文件中）app.vue中 写入 ，方法三：使用scroll-view中包裹的
深入研究-webkit-overflow-scrolling:touch及ios滚动
weixin_30731305的博客
12-14 1048
目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug ...
overflow-touch:在 iOS Safari 上使用 overflow-y 的 Web 元素的简单通知覆盖，通知他们可以使用两个手指滚动
07-09
) 用户，他们可以使用两根手指滚动浏览页面元素，否则在完整浏览器中将具有滚动条（overflow-y CSS 属性设置为除了没有之外的其他东西）。 用法 假设您没有为您的网站使用特别奇特的架构，只需将 repo 中的文件放入...
Pull:使用-webkit-overflow-scrolling刷新Web应用程序的方法
05-12
`-webkit-overflow-scrolling` 是一个WebKit专有的CSS属性，用于控制元素内的滚动条行为，尤其在iOS设备上能实现更为流畅的触摸滚动体验。这个属性在苹果的Safari和Chrome浏览器以及基于WebKit的其他浏览器上有效。 ...
详解overflow-scrolling解决滚动卡顿问题
01-18
以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。 -webkit-overflow-...
react-native-auto-scrolling:性能自动水平滚动的本机
05-07
npm install --save react-native-auto-scrolling 或者 yarn add react-native-auto-scrolling 特性 Struts 描述 默认 style View风格 _ endPaddingWidth 下一轮的填充宽度 100 duration 完成一个回合的时间...
移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住
weixin_30245867的博客
12-19 1047
起因 起因 -webkit-overflow-scrolling 问题 解决方案： 方案一 方案二 思考为什么会出现这个问题 总结 故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。 然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。 ...
【CSS兼容问题】ios和android兼容问题 -- overflow-y : auto层级过高
每天进步一点点, 靠近小目标一点点~
11-02 1047
ios设备上 , overflow-y:auto 属性层级非常高, 连position和z-index都没法撼动
-webkit-overflow-scrolling:touch
zxz86的博客
12-29 968
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。1.-webkit-overflow-scrolling:touch控制元素在移动设备上面是否有滚动回弹效果，属性为auto、touch。3.保证使用该属性的元素上没有设置定位,如果出现偶尔卡住不动的情况，那么在使用该属性的元素上。属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个。: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
h5页面在ios上无法滑动与z-index无效的情况
yixiancheng的博客
10-19 2796
ps：俩问题产生的原因是引用了scroll.js文件 问题一：无法滑动 scroll.js文件禁用了滑动事件，在不需要scroll方法的时候，解除禁用即可。 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow=...
z-index属性什么情况下会失效
weixin_44161385的博客
02-02 1163
z-index失效场景
探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug
那谁家的博客
08-28 7425
探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 最常见的例子就是， 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面在上下边界处偶尔会卡住不动。 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。 通过动态添加内容撑开容器，结果根本不能滑动的bug。 在网...
IOS safari浏览器中出现的z-index不生效的层级问题
热门推荐
就是不掉头发
08-05 40万+
出现的问题： 使用全屏遮罩层时遮不住导航栏，或者是弹窗时被导航栏覆盖，弹窗在导航栏下方 此情况仅IOS端出现，安卓和PC端正常，考虑IOS兼容性问题 1.为什么会出现层级不生效 原因1 谷歌，火狐等浏览器都是直接将一个盒子理解成一块一块的，想分层就按照你的z-index高低来区分，而safari不是，safari是将整个浏览器的页面看成一个整体，虽然也是一块一块的，但是他的分层是按照视觉感来分层的，它认为在下面的代码块总比在上面的代码块离人的眼睛近，所以就应该覆盖在上面的代码块上面，不应该用z-index来
uni-app_scroll-view_ios端_组件内部z-index失效处理
m0_37602317的博客
05-12 2033
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;
06-28
回答1：</h3><br/>-webkit-overflow-scrolling: touch; 是一个CSS属性，用于在移动设备上实现平滑的滚动效果。它可以应用于具有滚动内容的元素，例如 div 或 iframe。当用户在移动设备上滚动该元素时，它将以流畅的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值