绝对定位引起的css样式系统兼容问题

周六上线了第一版的口袋女友，最近这几天每天一个小版本优化送审，现在就线上用户反馈了的一个很诡异的bug，即系统对css绝对定位兼容问题导致。先看下面几张图，其中图1是正常效果，图2和3是反馈的异常。（PS：这是修复之后，我用测试环境还原bug时截的图）

图1

图2

图3

对比发现，其实是存在两个问题：
1、 页面超出一屏出现横向滚动；
2、绝对定位的内容显示出错（部分机型，反馈数据显示是iOS10以下的部分手机）。

下面就抽取这个页面部分wxml和wxss代码进行介绍
me.wxml文件：

  
  
     
      
  
  ...

me.wxss文件：

.top-view {
  display: flex;
  align-items: center;
  height: 449rpx;
  position: relative;
}

.bg-img {
  width: 100%;
  height: 449rpx;
}

.user-info {
  position: absolute;
  top: 0;
  width: 100%; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-img {
  margin-top: 95rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
}

...

很显然，代码排查时，没发现问题，并且模拟器和公司现有的多数真机运行，页面样式显示无异常。但线上这个问题却真实存在，不得不心里默念：这bug真够诡异。不过好在同事有个iPhone5，正好也遇到这个问题，可以让我调试排查问题。

根据代码分析，我的页面头部视图层级为：.page .top-view .user-info。放置用户头像昵称ID号和个性前面的父层.user-info使用了绝对布局，并且设置width为100%，高度根据内部的子view内容自动计算。按理说不会有问题，绝对布局设置width和top已经可以固定住user-info，页面是不会出现横向滚动的。

从问题2出发，我最先想到的是系统对于css样式兼容性问题，但由于公司只有一台问题机可供调试，万万不能升级系统来排查。模拟器同为iPhone5，因为开发工具为最新版，可想而知，模拟器的iOS系统应该也是最新，但模拟器没出现问题，说明系统兼容性猜测这个方向是成立的。

再回到问题1上来，页面超出一屏且横向滚动，应该是定位 position：absolute; 问题在部分机型不兼容导致。对于页面滚动和绝对布局问题，我查阅了CSS参考手册，关于position的绝对定位的示例：

水平垂直居中的对象

根据上面示例，我尝试对user-info绝对定位布局时采用另一种方案：

.user-info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

修改之后，用同事的iPhone5测试，显示正常如图2所示效果。
问题修复了，但出现这个问题的根源，我归为css对系统兼容导致。为避免这一类问题再次出现，以后写绝对定位时严格按照规范写。有时候一些写法在测试时真机和模拟器没问题，但线上用户系统版本和机型多样，无法预测是否可以兼容。

PS：目前这个问题是iOS系统10以下出现较多，至于是否是系统10 作为一个阈值，不敢断定，就目前来看，css在前端可行，为避免莫名掉坑，小程序还是严谨为好