• Home
  • About
    • Pretend To Write Like A Hacker photo

      Pretend To Write Like A Hacker

      besteric

    • Learn More
    • Twitter
    • Instagram
    • Github
    • Weibo
  • Posts
    • All Posts
    • All Tags
  • Projects

再说下Chrome渲染Transition的各种Bug

Reading time ~1 minute

问题重现:

大致在半年前发现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



Like Tweet +1
打赏

打赏留言

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少
支付宝
微信

打开支付宝扫一扫,即可进行扫码打赏哦