《safe-area-inset-bottom之兼容问题》

Posted 2022-12-14 杨晓风-linda

背景

     身为技术开发，每天惊喜不断。收到业务方反馈，定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置，着实有点吓人。经过一番排查，最终定位safe-area-inset-bottom的兼容问题

技术方案

1、问题定位

相关的业务代码没有做兼容处理：

bottom calc(110rpx + env(safe-area-inset-bottom))

导致在个别机型：

android 9 Android 8.1.0  ios 10.3.3  iOS 10.3.2

出现底部的结算条消失、本应定位在底部的位于页面顶部、在页面渲染完成后，底部结算条消失等不同的错乱表征

2、解决方案

bottom calc(100rpx)
bottom calc(110rpx + constant(safe-area-inset-bottom))
bottom calc(110rpx + env(safe-area-inset-bottom))

在原有的样式中，完善如上代码，依次做向上兼容

      虽然目前的技术方案解决了所遇问题，目前也没有用户再反馈，但其实在梳理的过程中，有个别疑点，所以，如果大家遇到类似的问题，还是要先聚焦业务，再聚焦这个方案，欢迎大家交流~

思考

     通过此次的问题解决总结，做toc的产品开发，兼容性是需要关注的一个重要环节。有人可能会问，怎样能避免兼容性问题出现呢？最初，我也会这样想。现在的我改变了这种想法，兼容性是无法绝对避免的，因为这种问题是各个因素发展而导致的一个表征。

    那产品的稳定性如何保证呢？一方面是自身的经验，善于总结，在思考技术方案时，设定相应预案；另外一个方面是在进行toc的业务开发时，尤其涉及到复杂的业务，在进行技术方案的敲定时，可以多想一步，可以先站在巨人的肩膀上，通过搜索引擎取经；另外可请教有经验的人；最重要的一点是要不断提升自己，关于行业领域的一些发展和问题，多产出一些预见性方案。