有沒有辦法讓我可以強制鉻進行慢速翻譯的子像素渲染？

我正在做一個非常緩慢的背景圖像過渡（向左緩慢滑動的空間視圖）。我的問題是，雖然它在Firefox上看起來很漂亮，但在Chrome上看起來很糟糕。由於Chrome缺乏子像素渲染，我得到了一個「緊張」的效果，並且圖像恰好捕捉到下一個像素。我無法加速圖像，因爲它會破壞我試圖達到的效果。我曾嘗試使用TranslateZ()技巧，我嘗試了每個CSS3效果，我可以想到它使它看起來更好，我試過Kinetic.js，我甚至試過Babylon.js希望WebGL能夠解決我的問題。有沒有辦法讓我可以強制鉻進行慢速翻譯的子像素渲染？

在這一點上，我不知所措，我可能只需要爲Chrome用戶提供一個靜態背景，並向Firefox用戶提供更多關於我可以爲UI UX做的小事情，然後放一個在我的網站上聲明說該網頁最好在FF瀏覽。

我真的不想這樣做。是否有任何解決方法？

來源

2014-02-28 JSArrakis

請提供工作演示或jsfiddle –

http://jsfiddle.net/yrwA9/有趣的是，當我在我的工作場所使用Chrome Portable時，瀏覽器呈現子像素就好了，然而在家裏我的遊戲機上最新版本的鉻，它不呈現子像素。 – JSArrakis

這似乎很好@JSArrakis ..也許這是一個圖形卡問題。 –

您可以通過施加小的轉變迫使像素渲染：

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

但是，而不是使用JS使動畫作品，爲什麼不使用CSS3動畫？如果您使用transform: translate()瀏覽器默認會使用子像素渲染。

此外，由於表現更好，你不應該得到你的緊張/波動。性能這裏

我在這裏把一個簡單的演示：http://jsfiddle.net/yrwA9/6/ （爲簡單起見，我只用了-webkit-供應商前綴）

來源

2014-06-04 16:38:59

謝謝！非常非常。 – agrublev

有趣的是：這在3D上下文中進行亞像素抗鋸齒，而不是在2D上下文中（即，而不是在3D空間中轉換之前在元素的2D光柵化中）。似乎有一種單獨的混疊算法，首先發生，當元素被繪製時，然後紋理被髮送到3D紋理，紋理髮生反鋸齒。有關示例，請參閱http://stackoverflow.com/questions/39963699。引入子像素混疊（而不是亞像素消除混疊）的唯一方法是放大（嘗試放大示例，然後您會看到大小不同）。 – trusktr

有沒有辦法讓我可以強制鉻進行慢速翻譯的子像素渲染？

回答

相關問題