上次小猿圈web前端老師講到關於HTML5+CSS3面試題，因為篇幅有限，只寫了其中的一部分，下面我們就瞭解餘下關於HTML5+CSS3面試題的內容。
一、消除transition閃屏
.css{
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
-webkit-backface-visibility: hidden;
}
二、開啟硬件加速
1，解決頁面閃白
2，保證動畫流暢
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
三、取消input在ios下，輸入的時候英文首字母的默認大寫
四、android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
五、android 2.3 bug
@-webkit-keyframes 需要以0%開始100%結束，0%的百分號不能去掉
after和before偽類無法使用動畫animation
border-radius不支持%單位
translate百分比的寫法和scale在一起會導致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
六、android 4.x bug
三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
同時設置border-radius和背景色的時候，背景色會溢出到圓角以外部分
部分手機(如三星)，a鏈接支持鼠標:visited事件，也就是說鏈接訪問後文字變為紫色
android無法同時播放多音頻audio
七、設計高性能CSS3動畫的幾個要素
儘可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位，利用translate3D開啟GPU加速
八、fixed bug
ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案：可用isroll.js，暫無完美方案
九、播放視頻不全屏
1.目前只有ios7+、winphone8+支持自動播放
2.支持Airplay的設備（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏，ios7+、winphone8+支持，部分android4+支持（含華為、小米、魅族）
webkit-playsinline="true"
<video>
十、H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面
十一、忽略將頁面中的數字識別為電話號碼
十二、忽略Android平臺中對郵箱地址的識別
十三、當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari
閱讀更多 小猿圈 的文章
