轉載：HTML5及移動端BUG

標籤：儲存   退出   存在   固定   bug   rgb   添加   translate   透明度   

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

轉載：HTML5及移動端BUG