搞PC項目，最頭疼的莫過於做IE6/7/8的相容性（很蛋疼的事）。而在如今移動端H5的興起中，面對形形色色的機型，各種各樣的品牌手機，導致我嗎們FE們要做各種手機適配問題、樣式相容問題等等（巨煩，找問題還不好找）。以下是在移動端項目之路上所遇到的各種問題: UC瀏覽器——css3的坑 最近在做一個移 ...
搞PC項目，最頭疼的莫過於做IE6/7/8的相容性（很蛋疼的事）。而在如今移動端H5的興起中，面對形形色色的機型，各種各樣的品牌手機，導致我嗎們FE們要做各種手機適配問題、樣式相容問題等等（巨煩，找問題還不好找）。以下是在移動端項目之路上所遇到的各種問題:
- UC瀏覽器——css3的坑
最近在做一個移動端項目，涉及到評論模塊，有評論必有點贊功能，當然也就存在點贊動畫效果，第一反應就是利用css3動畫效果。
方案一:transition+偽元素 。方案二:transition。方案呢三:animation+偽元素。方案呢四:animation。
背景:項目最終是放在支付寶平臺上的，而支付寶用的是UC內核。
在chrome、qq、微信等等打開都是沒問題（perfect，以為大功告成了...），誰知最後在支付寶（uc內核）打開...方案一/方案二/方案三都是一點效果都沒有（這是針對安卓手機沒效果，對於IOS效果還是有的，可見喬布斯的強大啊）...嗚嗚嗚...天啊，這是咋回事呢？
總結:在UC瀏覽器中，不支持偽元素使用css3動畫，對於transition動畫也不佳。提倡使用方案四...
- css動畫請使用transform
當我們使用css3的時候儘量使用transform，而非直接控制width,height,margin，否則會造成大量的計算，性能堪憂。transfrom會把元素獨立出來單獨計算的。
- 頁面底部放一個position為fixed的input輸入框
- IOS手機上，當input聚焦後輸入框會飛（被輸入法頂上去後並不是緊貼輸入法而是定位在正中間，而且位置可以被我們隨便上下移動），沒法實現我們想要的
- 安卓手機上是正常的
- scroll滾動事件
- qq瀏覽，uc瀏覽以及ios的瀏覽器，滾動時並不會時時觸發scroll事件，但會觸發touchmove(只有touch時觸發touchmove)。只有當停止滾動後才會觸發scroll。
- 在安卓手機上相對來說好很多
-webkit-overflow-scrolling-
-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 */ -webkit-overflow-scrolling: auto; /* 當手指從觸摸屏上移開，滾動會立即停止 */
相容性：目前就Safari 5.0以上的IOS手機支持該屬性
- 待續中-ing...
