记录一个由于css属性导致用户换手机的问题

作者在使用uniapp开发的应用中遇到45名用户蓝屏问题,经调查发现罪魁祸首是`-webkit-fill-available`属性。该属性在非Safari/Chrome内核手机上解析错误,导致组件高度异常。问题难以复现,最终通过同事的老设备得以定位和解决,影响了部分用户的体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近用uniapp写的一个app,由于用户数量比较多,用户所用的手机类型也比较多,在几百个用户当中,反馈说有4 5个手机页面出现了蓝屏的问题。
最开始以为是系统不兼容,或者报错导致的蓝屏,但是后来发现蓝屏的颜色和我们的主题色是一样的,于是就怀疑是不是页面上书写的问题导致的,最后发现这个罪魁祸首是 -webkit-fill-available 属性的问题。
因为这个属性的作用是支持safari和chrome浏览器内核,并使元素自适应撑满可用空间,但部分不支持safari和chrome内核的手机就会解析不了这个属性,然后我自定义的一个组件的高度就会失控,变成了填充整个屏幕的高度,导致了所谓的蓝屏。
这个问题最开始比较难解决是因为身边就没有出现蓝屏的手机,无法复现和排查,最后周围的同事有一个很老的机子,安装上了出现了这种情况,然后排查了一下才知道到底怎么回事。
问题是解决了,不过比较难受的就是因为这个app当时是和用户自己的日常工作相关的,那些出现蓝屏的用户不得已在前期换了手机,唉。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值