前端常見相容性問題系列1：丢失的CSS補間動畫

［前言］

有人說，前端開發的過程常常就是一個不斷“入坑”和“出坑”的。這句話道出了前端開發中的磕磕絆絆以及相伴而來的成長。遺憾的是，這些成長大都隻存儲在工程師的腦海裡，日複一日的，相信總有不少人花掉昂貴的時間在重複解決着同樣的“坑”。

stack overflow是我們查找一些常見bug解決辦法的好幫手，但我們每天也遇到各式各樣的新問題以及有一定獨特性的問題。若能花一點精力将自己遇到的問題、思考過程、解決方案、延伸感悟等記錄下來，讓經驗更具延續性和相對于具體某個工程師個體的獨立性，相信會是一件多赢的事情。是以，我決心抛磚引玉，先把自己曾遇到的一些相容性問題記錄并分享出來。其中，有的可能不太容易遇到，有的可能非常簡單。我将盡量采用“問題＋解決方案（＋感想）”的方式進行這個系列内容的編寫。

下面言歸正傳。

有這樣一個小動畫，讓元素<code>&lt;div class="animation-element1"&gt;hi, bugs!&lt;/div&gt;</code>從螢幕外從右側滑入，停留一會兒之後再離開螢幕。實作起來很簡單，用下面這個css樣式片段就可以了。

但是，當用小米2s中的uc浏覽器測試的時候，問題出現了——補間動畫丢失了，動畫中幾個狀态之間的切換都是硬切換。而在該手機下的chrome和系統自帶浏覽器中均無此問題。

我首先考慮它會不會是個性能問題，嘗試着用有“動畫性能bug神器”之稱的<code>-webkit-transform: translate3d(0,0,0);</code>進行修複，但問題未能解決。

仔細察看了一下上面的代碼，我又發現，keyframes中幾個狀态的transform值有時是rem, 有時是百分比，問題會不會出在這裡呢？于是，我做了另外一個demo，增加了一個<code>&lt;div class="animation-element2"&gt;hi, bugs!&lt;/div&gt;</code>，并加上如下樣式片段：

它的主要變化點在于将keyframes的所有translate都改成了百分比表示。經過測試，問題解決了。于是，我又做了另一個demo——把keyframes的所有translate都改成rem表示的（代碼片段如下），問題同樣得到解決。此外，我通過translate混用百分比和px兩種機關進行測試，效果和一開始混用百分比和rem的那個demo一緻，也會出現上述bug。這下問題點就确定了，就是-webkit-keyframes中各階段translate的表示機關不一緻導緻了問題的産生。

但是，這隻證明了keyframes中這麼寫會有這個問題。那麼如果不用keyframes實作動畫，而用transition來實作，會不會有同樣的問題呢？我又寫了下面這個demo：

試驗表明，問題和本文一開始那個demo一樣，即也會出現bug。

是以，不管是用keyframes，還是用 transition實作動畫，動畫過程中幾個狀态的translate的表示機關不一緻的時候，在小米2s的uc浏覽器中都會出現補間動畫丢失的問題。解決的方案就是統一動畫過程中各個狀态的translate的表示機關。這應該也是動畫的應有之意，隻是寫代碼的時候并沒有刻意去留意。相信肯定還會有更多的機器上能複現此問題。