移动端常见bug（3）

1.固定定位将失效

    问题描述： 父级元素用了 -webkit-transform属性后，所有子元素的固定定位将失效

  解决办法 ：把所有固定定位的元素放到最外层统一管理 或者   -webkit-transform:auto;

2.层级z-index问题    

（*-webkit-transform-style:preserve-3d;一定要加在需要进行3D转换元素的直接父级，否则会出现层级问题*）

移动端-webkit-transform:translateZ(100px)的层级高于z-index, 如果想到定位元素（a）浮于3D元素（b）之上,可以对a元素加上 -webkit-transform:translateZ(100px ),但是a元素的所有父级不要有-webkit-transform-style:preserve-3d否则a元素会错位；

3.display:none 导致 transition失效  

  使用visibility:visible/ hidden  替换display:block/none

     或者

    用-webkit-animation代替transition

4.input:disabled苹果上面会加上透明度

.inpSty input:disabled {color:rgba(255,255,255,0.9);opacity:1;}//苹果手机默认会加上透明度

5.input 点击出现键盘时 bug 

    问题描述：安卓 点击 input 出现键盘的时候，100%布局的页面的高度会发生变化，导致页面布局错乱

     解决办法   1.  .wrapper 加上最小高度  min-height:415; （注意有时候最小高度会失效，对input的最外层position加上绝对定位）

                    2.  如果还是有问题 直接对 input的外层加上最小高度

6、Retina屏的1px边框

?

1 2 3

Element{    border-width : thin ; }

7、webkit mask 兼容处理

某些低端手机不支持css3 mask，可以选择性的降级处理。

比如可以使用js判断来引用不同class：

?

1 2 3 4 5

if ( 'WebkitMask' in document.documentElement.style){    alert( '支持mask' ); } else {    alert( '不支持mask' ); }

8、旋转屏幕时，字体大小调整的问题

?

1 2 3

html, body, form, fieldset, p, div, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 {    -webkit-text-size-adjust: 100% ; }

9、transition闪屏

?

1 2 3 4 5 6

/设置内嵌的元素在 3 D 空间如何呈现：保留 3 D /   -webkit-transform-style: preserve -3 d; / 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /   -webkit-backface- visibility : hidden ;

10、圆角bug

某些Android手机圆角失效

?

1	background- clip : padding-box;