Is there a way I can force chrome to do subpixel rendering for a slow translation?

后端 未结 1 678
悲&欢浪女
悲&欢浪女 2021-02-19 09:42

Im doing a very slow transition of a background image (a view of space that slides slowly to the left). My problem is while it looks beautiful on Firefox, it looks horrible on C

1条回答
  •  不知归路
    2021-02-19 10:26

    You can force subpixel rendering by applying a small transformation:

    #container {
        transform: rotate(-0.0000000001deg);
        -webkit-transform: rotate(-0.0000000001deg);
    }
    

    But instead of using JS to make the animation work, why not use CSS3 animations? If you use transform: translate() browsers will use subpixel-rendering by default.

    Also since the performance is better you shouldn't get your jittery/wave motion.

    More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

    I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/ (For the sake of simplicity I only used the -webkit- vendor prefixes)

    0 讨论(0)
提交回复
热议问题