有没有办法，我可以强制chrome做一个慢速翻译的子像素渲染？ [英] Is there a way I can force chrome to do subpixel rendering for a slow translation?

问题描述

Im进行背景图像的非常缓慢的转换（向左缓慢滑动的空间视图）。我的问题是，它看起来很漂亮的Firefox，它看起来可怕的Chrome。我得到一个抖动的效果，由于Chrome的缺乏子像素渲染，图像只是捕捉到下一个像素。我不能加速图像，因为它会破坏Im试图实现的效果。我尝试使用 TranslateZ（）技巧，我试过每一个CSS3效果，我可以想到，使它看起来更好，我试过Kinetic.js，我甚至尝试Babylon.js希望WebGL能解决我的问题。

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.

此时，Im在亏损，我可能只是给Chrome用户一个静态的背景，并满足更多的Firefox用户关于我可以为UI UX做的整洁的小东西，然后只是在我的网站上放置一个免责声明说，该页面最好在FF查看。

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.

我真的不想这样做。

推荐答案

您可以通过应用一个小的变换来强制子像素渲染：

You can force subpixel rendering by applying a small transformation:

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

---

使动画工作，为什么不使用CSS3动画？
如果使用 transform：translate（），浏览器将默认使用子像素渲染。

---

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.

更多关于性能的信息： http://www.paulirish.com/2012/why-moving-elements-with-translate-is-

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

我在这里放了一个简单的演示： http://jsfiddle.net/yrwA9/6/
（为了简单起见，我只使用了-webkit- vendor前缀）

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)

这篇关于有没有办法，我可以强制chrome做一个慢速翻译的子像素渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！