ios苹果手机position:fixed的兼容性以及无法定位到全局的问题

position:fixed定位问题

首先大家知道position:fixed;这个css属性在任何环境下都有可能会被阻断,也就是无法作用于全局。包括:transform / perspective / filter
在这里插入图片描述
也就是说,当父级元素中有含上面几个css属性的时候,你写的模态框,透明背景等等,就不能覆盖整个屏幕了。

例如:
可以试试在父级加入下面的css:那么fixed的范围就是加入这个属性的元素

transform: translateZ(0);
-webkit-transform: translateZ(0);

IOS系统中:

ios5以上的手机确实兼容了position:fixed,
但是对于上面说到的三个,ios不论什么浏览器还会被下面这个属性阻断:
overflow:scroll;
所以要想我们在项目中的遮罩蒙版等作用于整个屏幕,要将其所有的父级元素css中的overflow置为visible,但是这又是不现实的。

解决办法

简单粗暴的,用js控制下
document.getElementById(‘xxx’).style.overflow= ‘visible’
document.getElementById(‘xxx’).style.overflow= ‘scroll’
根据业务逻辑去处理一下,
或者就是创建根节点挂在app或者body上
暂时还没想到其他更好的办法

参考链接:

谈一谈苹果手机关于position:fixed的兼容性
ios position: fixed 问题
CSS position: fixed absolute失效问题

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值