在修改移动端的一个需求时遇到这样的一个问题，遮罩层用的是position:fixed;pc上移动模式测试正常，andriod测试正常，当用iphone5下的safari浏览器测试时，出现滑动时，浏览器的地址栏变小，导致页面变长，那么原来的fixed用的height:100%，明显没有遮住下面的内容，可以看到这样的效果。
开始的想法是这样的，但结果都失败了：
1、把遮罩层的高度加高，用bottom: -50%，失败
2、固定地址栏或直接显示全屏，
结果还是失败
上网查了好些资料都没找到合适的解决办法，后来通过同事的建议在网上找到同样问题的，用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;
先这样吧，遇到问题，折腾了一整天，记录下来，为以后做参考