当fixed遇到ios，页面滑动遮不住下面内容时

在修改移动端的一个需求时遇到这样的一个问题，遮罩层用的是position:fixed;pc上移动模式测试正常，andriod测试正常，当用iphone5下的safari浏览器测试时，出现滑动时，浏览器的地址栏变小，导致页面变长，那么原来的fixed用的height:100%，明显没有遮住下面的内容，可以看到这样的效果。

 

开始的想法是这样的，但结果都失败了：

1、把遮罩层的高度加高，用bottom: -50%，失败

2、固定地址栏或直接显示全屏，

<meta content="no" name="apple-mobile-web-app-capable">
<meta content="no" name="apple-touch-fullscreen">

结果还是失败

 上网查了好些资料都没找到合适的解决办法，后来通过同事的建议在网上找到同样问题的，用transform: translateZ(0);再配合原来的遮罩层加高，实现了即使滑动页面时，下面依然显示的是遮罩层部分。终于搞定了

http://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome

 继续下一个问题，父元素用display: flex; align-items: center;justify-content: space-between;实现下面的效果

但在iphone的safari下后面的部分折行，并非如此显示，而是如下显示：

除要兼容浏览器的写法加上：-webkit

另外加上下面的样式，才算显示正常

-webkit-box-pack: justify;
-webkit-box-align: center;

box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。

该属性规定水平框中的水平位置，以及垂直框中的垂直位置。

box-align 属性规定如何对齐框的子元素。

 

完整样式如下：

 

-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
padding: 0 $navMargin;
background: #fff;
height: $navHeight;
box-sizing: border-box;
-webkit-box-pack: justify;
-webkit-box-align: center;

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

 先这样吧，遇到问题，折腾了一整天，记录下来，为以后做参考