［前言］
有人说，前端开发的过程常常就是一个不断“入坑”和“出坑”的。这句话道出了前端开发中的磕磕绊绊以及相伴而来的成长。遗憾的是，这些成长大都只存储在工程师的脑海里，日复一日的，相信总有不少人花掉昂贵的时间在重复解决着同样的“坑”。
Stack Overflow是我们查找一些常见bug解决办法的好帮手，但我们每天也遇到各式各样的新问题以及有一定独特性的问题。若能花一点精力将自己遇到的问题、思考过程、解决方案、延伸感悟等记录下来，让经验更具延续性和相对于具体某个工程师个体的独立性，相信会是一件多赢的事情。因此，我决心抛砖引玉，先把自己曾遇到的一些兼容性问题记录并分享出来。其中，有的可能不太容易遇到，有的可能非常简单。我将尽量采用“问题＋解决方案（＋感想）”的方式进行这个系列内容的编写。
下面言归正传。
问题
有这样一个小动画，让元素<div class="animation-element1">hi, bugs!</div>从屏幕外从右侧滑入，停留一会儿之后再离开屏幕。实现起来很简单，用下面这个CSS样式片段就可以了。
.animation-element1{
position: fixed;
-webkit-transform: translate(100%);
transform: translate(100%);
right: 0;
top: 0;
padding: 1rem;
width: 10rem;
background-color: #0fd5ff;
border-radius: 2rem;
color: #fff;
-webkit-animation: opacity-transition1 ease 2s 1s;
animation: opacity-transition1 ease 2s 1s;
}
@-webkit-keyframes opacity-transition1{
0% {
-webkit-transform: translate(100%);
transform: translate(100%);
}
20% {
-webkit-transform: translate(-1rem);
transform: translate(-1rem);
}
80% {
-webkit-transform: translate(-1rem);
transform: translate(-1rem);
}
100% {
-webkit-transform: translate(100%);
transform: translate(100%);
}
}但是，当用小米2S中的UC浏览器测试的时候，问题出现了——补间动画丢失了，动画中几个状态之间的切换都是硬切换。而在该手机下的Chrome和系统自带浏览器中均无此问题。
寻找解决办法
我首先考虑它会不会是个性能问题，尝试着用有“动画性能bug神器”之称的-webkit-transform: translate3D(0,0,0);进行修复，但问题未能解决。
仔细察看了一下上面的代码，我又发现，keyframes中几个状态的transform值有时是rem, 有时是百分比，问题会不会出在这里呢？于是，我做了另外一个demo，增加了一个<div class="animation-element2">hi, bugs!</div>，并加上如下样式片段：
.animation-element2{
position: fixed;
-webkit-transform: translate(100%);
transform: translate(100%);
right: 0;
top: 20rem;
padding: 1rem;
width: 10rem;
background-color: #0fd5ff;
border-radius: 2rem;
color: #fff;
-webkit-animation: opacity-transition2 ease 2s 1s;
animation: opacity-transition2 ease 2s 1s;
}
@-webkit-keyframes opacity-transition2{
0% {
-webkit-transform: translate(100%);
transform: translate(100%);
}
20% {
-webkit-transform: translate(-10%);
transform: translate(-10%);
}
80% {
-webkit-transform: translate(-10%);
transform: translate(-10%);
}
100% {
-webkit-transform: translate(100%);
transform: translate(100%);
}
}它的主要变化点在于将keyframes的所有translate都改成了百分比表示。经过测试，问题解决了。于是，我又做了另一个demo——把keyframes的所有translate都改成rem表示的（代码片段如下），问题同样得到解决。此外，我通过translate混用百分比和px两种单位进行测试，效果和一开始混用百分比和rem的那个demo一致，也会出现上述bug。这下问题点就确定了，就是-webkit-keyframes中各阶段translate的表示单位不一致导致了问题的产生。
<div class="animation-element3">hi, bugs!</div>.animation-element3{
position: fixed;
-webkit-transform: translate(12rem);
transform: translate(12rem);
right: 0;
top: 40rem;
padding: 1rem;
width: 10rem;
background-color: #0fd5ff;
border-radius: 2rem;
color: #fff;
-webkit-animation: opacity-transition3 ease 2s 1s;
animation: opacity-transition3 ease 2s 1s;
}
@-webkit-keyframes opacity-transition3{
0% {
-webkit-transform: translate(12rem);
transform: translate(12rem);
}
20% {
-webkit-transform: translate(-1rem);
transform: translate(-1rem);
}
80% {
-webkit-transform: translate(-1rem);
transform: translate(-1rem);
}
100% {
-webkit-transform: translate(12rem);
transform: translate(12rem);
}
}但是，这只证明了keyframes中这么写会有这个问题。那么如果不用keyframes实现动画，而用transition来实现，会不会有同样的问题呢？我又写了下面这个demo：
<div class="animation-element4">hi, bugs!</div>
<script>
var $el4 = document.querySelector('.animation-element4');
setTimeout(function () {
$el4.className+= ' animation-test';
},2000);
$el4.addEventListener('webkitTransitionEnd', function () {
$el4.className = 'animation-element4';
})
</script>.animation-element4{
position: fixed;
-webkit-transform: translate(100%);
transform: translate(100%);
right: 0;
top: 60rem;
padding: 1rem;
width: 10rem;
background-color: #0fd5ff;
border-radius: 2rem;
color: #fff;
-webkit-transition: -webkit-transform ease 2s;
transition: transform ease 2s;
}
.animation-element4.animation-test{
-webkit-transform: translate(-10rem);
transform: translate(-10rem);
}试验表明，问题和本文一开始那个demo一样，即也会出现bug。
结论
因此，不管是用keyframes，还是用 transition实现动画，动画过程中几个状态的translate的表示单位不一致的时候，在小米2S的UC浏览器中都会出现补间动画丢失的问题。解决的方案就是统一动画过程中各个状态的translate的表示单位。这应该也是动画的应有之意，只是写代码的时候并没有刻意去留意。相信肯定还会有更多的机器上能复现此问题。
