问题重现:

大致在半年前发现Chrome渲染Transition时页面闪动Bug，最近在Mac下的Chrome 20.0.1132.47版本发现这货又死灰复燃了，更离谱的是Hover淘宝首页吊顶的其他选项时，购物车会消失…有兴趣的同学可以访问这个代码片段重现下

事故原因:

虽然我们可以合理推断这个问题依然还是Chrome那糟糕的动画渲染功能，但是更进一步的思考下为什么只有购物车消失了？经过简单的排查后发现是这行代码导致的：

#site-nav .quick-menu .mini-cart #mc-menu-hd {overflow: hidden;}

如何解决：

添加 -webkit-backface-visibility: hidden; 到出现问题的DOM父节点，可以避免购物车消失的问题。

新的问题：

Mac下会出现使用Transition的DOM结构字体变得非常浅，Windows下没有此问题…

不是最佳的解决方案：

放弃Chrome下使用Transition属性，删除 -webkit-transition: -webkit-transform .2s ease-in; 世界再次美好了！

参考资料：

• http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome

• http://code.google.com/p/chromium/issues/detail?id=36902

• http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome