线上反馈小程序在iOS 12以上版本出现了底部导航栏被刘海屏小黑条遮挡的现象。
排查tabbar组件的样式适配，第一眼并没有感觉有什么问题。safe-area-inset-bottom变量用了，env和constant兼容也做了，看着没有问题。
1
2
3
4
5
6
| .ios-safe-wrap{
width: 100%;
height: 1px;
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
}
|
以为是微信小程序更新了之后某些兼容写法失效了，在查询资料的时候翻到了这篇帖子：《微信小程序中安全区域计算和适配》，里面也提到了一样的适配方法，但结尾还多了一句“Tips：constant和env不能调换位置”，然后一看他的案例：
1
2
| padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
|
擦，原来是写反了，遂改。
