在修改移動端的一個需求時遇到這樣的一個問題，遮罩層用的是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;
先這樣吧，遇到問題，折騰了一整天，記錄下來，為以后做參考