WebKit：CSS模糊文字+ translate3d

我發現Chrome和其他WebKit瀏覽器大量模糊了也應用了translate3d的任何CSS縮放內容。WebKit：CSS模糊文字+ translate3d

這是JS小提琴：http://jsfiddle.net/5f6Wg/。（Chrome瀏覽。）

.test { 
 
    -webkit-transform: translate3d(0px, 100px, 0px); 
 
} 
 

 
.testInner 
 
{ 
 
    /*-webkit-transform: scale(1.2);*/ 
 
    -webkit-transform: scale3d(1.2, 1.2, 1); 
 
    text-align: center; 
 
}

<div class="test"> 
 
    <div class="testInner"> 
 
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied. 
 
    </div> 
 
</div>

是否有這方面的任何已知的解決方法？我在上面的簡單例子中得到了這個結論，我可以簡單地使用translate而不是translate3d - 這裏的要點是將代碼剝離到最基本的要領。

來源

2011-11-05 phil

相同的火狐 – Krii

我認爲這是固定的，看起來不模糊 – neaumusic

一個小的增加：在上次Chrome我stucked像問題一樣，使用'translate3d'不使用四捨五入的值。四捨五入爲我解決了所有的問題。 – saroff

Webkit將3d轉換元素視爲紋理而不是矢量以提供硬件3d加速。唯一的解決辦法是增加文本的大小並縮小元素的尺寸，實質上創建更高的res紋理。

在這裏看到： http://jsfiddle.net/SfKKv/

注意，抗鋸齒還是underpar（莖丟失），所以我興修了一點文字陰影的文本。

來源

2011-11-07 15:37:42 Duopixel

超級有用，謝謝！ – phil

那麼移動webkit會慢多少？ –

偉大的解決方案，看起來有點像視網膜解決方案，但隨後用於桌面。喜歡這個想法，現在就實施它，超級道具。 – ReSpawN

-2

Webkit將3d轉換元素視爲紋理而不是矢量以提供硬件3d加速。

這與它無關。您會注意到您的混疊問題可以通過添加持續時間和方向信息（例如0.3線性）來解決。你有馬試圖呈現在運行時的一切：

同爲上述^

來源

2012-01-30 17:12:11 Tom

中對我來說看起來很糟糕對不起湯姆，但我不知道你指的是什麼。你在說要添加動畫嗎？（意圖只是爲了擴展，而不是動畫。）如果你修改了原來的JS小提琴，也許這將有所幫助。 – phil

由於我正在使用轉換，我添加了持續時間和方向。模糊仍然存在。 –

-1

body { 
-webkit-font-smoothing: subpixel-antialiased; 
}

或者我認爲你可以把一個特定的元素，但我是有一個元素影響了整個問題現場。

我認爲這是自定義字體字體的問題。

來源

2012-07-31 21:26:13 placeboaddict

請注意，您正在嘗試在此處添加值，但我提供的JS小提琴不使用自定義字體，-webkit-font-smoothing似乎沒有任何區別。它在上面的小提琴中對你有用嗎？ – phil

subpixel-antialiased字體平滑現在是Chrome中的默認設置。 –

當使用同位素插件（http://isotope.metafizzy.co/index.html）和縮放插件（http://janne.aukia.com/zoomooz/）時，我遇到了這個問題。我構建了一個jquery插件來處理我的情況。我把它扔在github回購中，以防有人從中受益。 - https://github.com/charleshimmer/jquery-hirestext。

來源

2012-09-11 20:10:20 chuckles

我發現，使用：

-webkit-perspective: 1000;

您的字體或圖標集的容器上的實驗與Android 4.2的Nexus了一段時間的問題後，把每一件事情清脆我。

來源

2013-06-27 08:45:42 hallodom

當然，那樣做！與-webkit-transform一起：translate3d（0,0,0）。信件表格在表格末尾以奇怪的方式突然出現，並且這固定了它。嘗試了在陽光下的一切。 – jwinn

假設這是因爲這些屬性會觸發GPU加速，也會提高這些元素上的轉換性能！ :) – hallodom

此解決方案應標記爲正確的答案。 –

css過濾器效果是一種圖形操作，允許操縱任何HTML元素的外觀。由於Chromium 19這些過濾器是GPU加速使它們超快速。

CSS3引入一堆標準過濾效果，它們中的一個是模糊fitler：

-webkit-filter: blur(radius);

在「半徑」參數影響如何在屏幕上彼此混合許多像素，所以較大的值會造成更多的模糊。零當然會使圖像保持不變。

將半徑設置爲0將強制瀏覽器使用GPU計算並強制它保持您的html元素不變。這就像應用「硬邊緣」效果。

所以對我來說，爲了解決這個模糊效果，最好的解決辦法是添加的代碼，這個簡單的行：

-webkit-filter: blur(0);

還有一個已知的錯誤隻影響視網膜屏幕。（請參閱：Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?）。因此，爲了使它的工作原理也爲視網膜，我建議添加此下聯：

-webkit-transform: translateZ(0);

來源

2015-09-01 13:46:15 maoosi

請給出一些解釋給你的答案 – Blip

作爲一個說明在開發工具中應用模糊動態似乎不具有相同的效果，因爲它在那裏在頁面加載。不知道它是否只是我，但這可能是您正在尋找的答案，只是重新加載頁面。 – Spaceman

在谷歌搜索上嘗試了其他東西后，這是修復。謝謝！ – th317erd

我用JavaScript來移動文本1px的頂部，然後用100毫秒後，回到1px的下降。它幾乎沒有感覺，並且完全跨瀏覽器解決了問題。

來源

2015-11-13 14:20:02 Mixtelf

試試這個

...{ 
zoom:2; 
-webkit-transform: scale(0.5); 
transform: scale(0.5); 
}

或者一個更精確的方法，您可以調用javascript函數通過去除基質的十進制值重新計算變換矩陣。看到：https://stackoverflow.com/a/42256897/1834212

來源

2016-03-09 13:26:00 Miguel

WebKit：CSS模糊文字+ translate3d

回答

相關問題