防止閃爍的webkit變換

147

可能重複：
iphone webkit css animations cause flicker 防止閃爍的webkit變換

出於某種原因，我的WebKit的transform屬性時，有一個動畫前右輕微的閃爍。下面是我在做什麼：

CSS：

#element { 
    -webkit-transition: -webkit-transform 500ms; 
}

的JavaScript：發生轉變

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

權之前，有一個閃爍。任何想法，爲什麼這是，我怎麼能解決這個問題？

謝謝！

更新：這隻發生在Safari中。它不會在Chrome中發生，儘管動畫確實有效。

來源

2010-08-11 devongovett

我注意到iOS 4.2 beta 2中的問題。 – rpitting 2010-10-13 08:16:28

發生對我來說FF版本17.0現在...縮放對象的縮放超出了窗口的大小 – vsync 2012-11-29 06:06:23

在某些情況下Chrome中的行爲始終存在... – 2017-01-18 10:10:19

257

解決方法在此處提及：iPhone WebKit CSS animations cause flicker。

對於你的元素，你需要設置

-webkit-backface-visibility: hidden;

來源

2010-10-13 08:21:46 rpitting

+11

我的轉換影響了網站上的其他元素，最後我不得不將規則添加到網站上的所有元素。 – mlunoe 2013-01-10 13:53:47

也適合我。我有一個隱藏的菜單，當它顯示時，它會用CSS動畫將內容向下推。將上面的規則應用到隱藏菜單後面的主要內容div中，可以解決我的問題，而不會嚴重影響性能。注意：當我將它應用到我的全局HTML規則時，它使CSS動畫變得更糟，小心！ – Primus202 2013-04-08 23:03:02

對此屬性使用通配符選擇器實際上會導致其他元素的額外閃爍。我的工作解決方案是有選擇地將該屬性應用於正在翻譯的元素。 – hlfcoding 2013-09-17 03:19:19

上述兩個答案的兩個對我的工作有一個類似的問題。

但是，body {-webkit-transform}方法會使頁面上的所有元素有效地以3D呈現。這並不是最糟糕的事情，但它稍微改變了文本和其他CSS風格元素的渲染。

這可能是你想要的效果。如果您正在對頁面上的變換進行批次，它可能會很有用。否則，-webkit-backface-visibility：隱藏在元素上，您的轉換是最少侵入的選項。

來源

2011-07-07 14:08:00

規則：

-webkit-backface-visibility: hidden;

不會爲精靈或圖像背景的工作。

body {-webkit-transform:translate3d(0,0,0);}

擰緊平鋪的背景。

我喜歡做的一類叫做無甩尾和做到這一點：

.no-flick{-webkit-transform:translate3d(0,0,0);}

來源

2011-10-11 23:55:05 ablemike

你是對的，背景知名度修復不適用於圖像背景。謝謝。 – ppcano 2012-10-06 12:15:22

請注意，使用translate3d（0,0,0）_anywhere_時，Chrome現在會打破任何背景位置：您可能會或可能沒有。 – Norris 2013-07-31 10:49:44

Awww，yeeeaaah。像黃油。 – gfullam 2015-04-08 04:37:45

對於更詳細的解釋，看看這篇文章：

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

我肯定會避免應用它到了整個身體。關鍵是要確保您計劃在未來轉換的任何特定元素都以3d渲染，因此瀏覽器無需切換進入和退出渲染模式。向動畫元素添加

-webkit-transform: translateZ(0)

（或已提及的任一選項）將實現此目的。

來源

2012-01-20 21:32:36

這個工作後把實際的價值：transform：translateZ（0.1px） – bob 2017-06-24 00:10:24

我不得不使用：

-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden;

的元素，或者我仍然會得到一個Flickr的第一次頁面加載後的過渡發生

來源

2012-03-09 18:50:32

觸發硬件加速渲染的問題元素。我會建議不要在*，body或html標籤上執行此操作。

.problem{ 
    -webkit-transform:translate3d(0,0,0); 
}

來源

2012-11-12 14:38:48

添加正在閃爍，這個CSS屬性的元素：

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

（而且是個大拜森Hoad：http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit）

來源

2012-12-21 17:27:27

我需要使用它來讓事情停止閃爍。 – matthewpavkov 2013-06-11 19:33:00

拯救生命！謝謝。 backface-visibility：hidden;沒有爲我工作。這確實:-) – 2014-12-04 12:42:32

我發現應用-webkit-backface-visibility: hidden;到平移元件和-webkit-transform: translate3d(0,0,0);所有的孩子，閃爍然後消失

來源

2013-01-02 22:14:12

防止閃爍的webkit變換

回答

相關問題