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?

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?

• javascript
• css
• google-chrome

• Please provide a working demo or a jsfiddle – Vangel Tzo Commented Feb 28, 2014 at 14:21
• jsfiddle.net/yrwA9 The funny thing is too, when I use Chrome Portable here at my workplace, the browser is rendering subpixel just fine, however at home on my gaming computer with the most updated version of chrome, it does not render subpixel. – JSArrakis Commented Feb 28, 2014 at 14:31
• It's seems to be fine @JSArrakis .. maybe it's a graphic card issue. – Vangel Tzo Commented Feb 28, 2014 at 14:33
• 2 It looks jittery on my version of firefox. (A CSS transistion might have better results) – Matthew Wilcoxson Commented Feb 28, 2014 at 14:39
• 1 You could use WebGL on canvas to force antialiasing, although support and consistency across browsers/hardware will be a bit iffy. – monners Commented May 29, 2014 at 3:31

1 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)