在修改移动端的一个需求时遇到这样的一个问题,遮罩层用的是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;
先这样吧,遇到问题,折腾了一整天,记录下来,为以后做参考