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

被折叠的 条评论
为什么被折叠?



