问题重现:
大致在半年前发现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://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome