web移动端常见BUG

HTML5及移动端BUG（1）

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. border-radius overflow:hidden 子元素隐藏不了  
    父级元素加上 -webkit-transform-style:preserve-3d; 或者  -webkit-transform: rotate(0deg);能够解决苹果手机的问题，但是安卓手机子元素还是隐藏不了

7 微信长按二维码识别不了（微信保存图片同理）

     解决办法：.qrcode{padding-top: 200px !important;margin-top: -200px !important;position: relative;z-index: 100;-webkit-user-select: none;} 对二维码图片添加qrcode样式

    问题描述：

    1.可识别区域比正常地方稍微往上一点（微信标题栏+系统状态栏的高度（64px）），如果网站采用了 viewport（640） 缩放，那么可识别区域偏上的高度差不多200

    2.微信长按二维码可以能导致手机内存泄露，手机变卡，css3动画出不来（解决办法：退出微信进程，过2分钟之后进入微信）

8 animation动画失效

    问题原因：

        1. 添加动画的元素必须为块级元素，行内元素需要转车块级元素或者添加绝对定位，伪类(:before  :after)不能添加动画

         2.动画的每个阶段的属性（-webkit-transform）要保持一致

     如下这种正确  

      @-webkit-keyframes push{

          0%{-webkit-transform:scale(0) translate(0,0);opacity:0;}

          20%{-webkit-transform:scale(1) translate(0,0);opacity:1;}

          100%{-webkit-transform:scale(0) translate(0,-100px);opacity:0;}

        }

      如下这种错误

        @-webkit-keyframes push{

          0%{-webkit-transform:scale(0) translate(0,0);opacity:0;}

          20%{-webkit-transform:scale(1) translate(0,0);opacity:1;}

          100%{-webkit-transform: translate(0,-100px);opacity:0;}  /*缺少scale(0)*/

        }

9 微信浏览器音乐播放失败

    问题描述：

    如果页面上面有背景音乐和特效音乐，背景音乐准备播放之前（ canplay 没触发之前）同时加载特效音乐会导致背景音乐不能正常的播放

     (背景音乐和特效音乐一起加载会导致背景音乐播放不了)

     解决办法：

    等待背景音乐  canplay 或者 canplaythrough 之后在加载特效音乐

9 animation动画在安卓卡顿

    问题原因：

    js添加class给元素添加animation动画在安卓上动画会出现卡顿和延迟

    解决办法

    1.事先在css里面为元素添加好animation动画，隐藏元素，然后用js控制元素显示

    2.js添加class给元素添加 transition 动画

10 animation-fill-mode:both在安卓会导致页面默认滚动条闪烁

   问题原因

   .pagebox{ -webkit-animation: fadeIn 0.5s ease 0s both;z-index:2;} 在安卓下.pagebox 子集元素默认滚动条会导致.pagebox闪烁

    （animation-fill-mode:both和z-index同时存在才会有这个问题）

    解决办法

   .pagebox{-webkit-animation: fadeIn 0.5s ease 0s;z-index:2;}去掉both