移动端常见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, h1, h2, h3, h4, h5, h6{

  -webkit-text-size-adjust:100%;

}

9、transition闪屏

?

1

2

3

4

5

6

/设置内嵌的元素在3D 空间如何呈现：保留3D /

 

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /

 

-webkit-backface-visibility:hidden;

10、圆角bug

某些Android手机圆角失效

?

1

background-clip: padding-box;