CSS3轉換導致屏幕閃爍或別名字體

我想對元素應用一些CSS3轉換，並有兩個問題。該網頁包含許多粘滯便箋，我想放大點擊（縮放）或翻轉懸停（rotateY）他們通過應用CSS類與一些JavaScript。CSS3轉換導致屏幕閃爍或別名字體

例如變焦類是這樣的：

.postit-container.enabled { 
    z-index: 15; 
    -webkit-transition: -webkit-transform 0.15s ease-in-out; 
    -moz-transition: -moz-transform 0.15s ease-in-out; 
    -o-transition: -o-transform 0.15s ease-in-out; 
    -ms-transition: -ms-transform 0.15s ease-in-out; 
    transition: transform 0.15s ease-in-out; 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    transform: scale(1.25); 
}

對於翻頁效果，我只對:hover使用rotateY(180deg)。

每個貼圖的默認旋轉角度爲6deg，我假冒隨機旋轉nth-child CSS3選擇器應用不同的旋轉。

問題是屏幕在縮放或翻轉時會隨機閃爍和頁面上的某些字體被改變，看起來很醜但不是全部，這真的很奇怪。

這裏是一個的jsfiddle，所以你可以看到自己的問題：

JSfiddle（在Mac OS X 10.6.8與谷歌瀏覽器12.0.742.122測試）

我已經嘗試過了-webkit-backface-visibility伎倆，閃爍已經消失了，並肯定會進行轉換，但字體看起來很難看所有時間。

我希望有人有一個魔術，因爲我真的不明白這種行爲。

來源

2011-07-27 wnkz

你可以把例子放入一個jsfiddle中，截圖沒有很好地說明問題。

但是我遇到過類似的問題，我也找不到問題的原因。或者拿出一個關於可能發生什麼的解釋。

但是我找到了解決方案，在我的情況下工作。

-webkit-transform-style: preserve-3d;

我將它應用於所有似乎有渲染問題的元素。在我的情況下，一些元素在沒有被轉換的情況下，甚至在同一個容器中，以一種看似隨機和不一致的方式進行。

類似的東西。

.header *, .sticky * { 
    -webkit-transform-style: preserve-3d; 
}

我想提供一個關於什麼保存-3d的解釋，但是我發現文檔很模糊。

關於我收集的癥結是，它可以解決這個問題（它所做的那樣），它有兩個屬性

-webkit-transform-style: preserve-3d; 
//and 
-webkit-transform-style: flat;

平默認情況下使用。

對不起，我不能給出更詳細的答案，但我希望這可以解決你的問題。

如果有人在webKit上工作，你能否提供和解釋這是什麼。

來源

2011-07-27 11:34:50 AshHeskes

我很想把例子放入jsfiddle，但這是一個非常複雜的頁面和一個我不能那樣分享的私人項目。我試過你的解決方案，但似乎沒有工作......：/我會看看我是否可以僞裝成jsfiddle;）謝謝。 – wnkz

這裏是你jsfiddle：http://jsfiddle.net/DaPsn/10/ – wnkz

我看了一下，我用我在答案中提到的方法修復它。但是，我在'.postit-container'中添加了'-webkit-transform-style：preserve-3d'。唯一的問題是字體總是有點模糊，但它們至少是一致的。如果你仍然遇到其他元素的問題。嘗試一個毯子'* {-webkit-transform-style：preserve-3d; }'。在這裏修改http://jsfiddle.net/AshMokhberi/sczCa/。說實話，我認爲你不會比這更好。請不要忘記勾選我的答案。 – AshHeskes

嘗試以下添加到您的CSS：

-webkit-transform: translateZ(0);

這將迫使鉻硬件加速，因爲鉻通常不使用它基於CSS的

來源

2011-07-27 11:19:26 Semyazas

我很抱歉，但是這似乎已經爲'背面，visibility'同樣的效果。字體只是一直看着別名。 – wnkz

我看到你的文本只是決定抗鋸齒。嘗試添加3d變換例如rotateZ(0)來解決這個問題。

來源

2011-07-27 11:22:06 bjornd

我有同樣的問題。找到解決方案的時間很長，但最終我找到了它。

只需將類.no-flickr添加到您網站上的任何問題對象，即可看到正確的動畫，並且沒有任何錯誤。

看到這個http://jsfiddle.net/DaPsn/92/

.no-flickr {   
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
}

來源

2014-08-26 22:47:10

CSS3轉換導致屏幕閃爍或別名字體

回答

相關問題