Is there a way I can force chrome to do subpixel r

Question

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 Chrome. I get a "jittery" effect due to Chrome's lack of subpixel rendering, and the image just snaps to the next pixel. I cannot speed the image up because it will destroy the effect Im trying to achieve. I have tried using TranslateZ() tricks, I have tried every CSS3 effect I could think of to make it look better, Ive tried Kinetic.js, Ive even tried Babylon.js hoping that WebGL would fix my problem.

At this point Im at a loss and I might just have to give Chrome users a static background and cater more to the Firefox users in regards to the neat little things I can do for the UI UX, and then just put a disclaimer on my site saying that the page is best viewed in FF.

I REALLY dont want to do this. Is there ANY work around at all?

Answer 1

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)