iPhone的WebKit CSS動畫導致閃爍

這是iPhone網站： http://www.thevisionairegroup.com/projects/accessorizer/site/iPhone的WebKit CSS動畫導致閃爍

後點擊「開始遊戲」，你會得到一個遊戲。槍會滾動。您可以上下滾動錢包和配件。你可以看到，當你放開它們時，它們會卡入到位。就在發生這種瞬間時，就會出現閃爍。我使用的唯一的WebKit的動畫是：

'-webkit-transition': 'none' 

'-webkit-transition': 'all 0.2s ease-out' 

'-webkit-transform': 'translate(XXpx, XXpx)'

我選擇使用基於我是否不希望它以動畫的第一或第二過渡，並變換爲我四處移動的東西的唯一途徑。

雖然最大的問題是當您點擊「匹配項目」，然後點擊「再次播放」。你會看到動畫中的槍支，配件/錢包的整個背景變白。有人可以請我散發一些洞察力，爲什麼這會發生？

來源

2010-06-01 Jake Chapa

試試這個，並希望這將有助於：

#game { 
    -webkit-backface-visibility: hidden; 
}

來源

2010-07-28 01:42:26 donohoe

這個工作在Safari默認偉大的，但在單機模式中失敗。你有什麼想法？ – cYrus 2011-12-23 21:54:41

122

我添加-webkit-backface-visiblity和主要幫助，但重新加載頁面後，我仍然有一個初步的閃爍。當我加入-webkit-perspective: 1000時，沒有任何閃爍。

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

來源

2010-08-11 18:49:44

+18

1000背後的魔力是什麼？其他值（> 0）是否可以工作？ – cYrus 2011-12-23 20:08:01

注意：這會使動畫對windows chrome v19上的鼠標事件沒有響應：實際上，添加這個，沒有閃爍，但動畫並不總是開始（鼠標懸停或任何其他） – skyline26 2012-06-26 20:52:38

解決了我的問題：簡單的動畫div彈出1px在Chrome 25中動畫開始的左側，但在Safari 6.0.2和Canary 27中沒有問題。很有用，希望我明白爲什麼。 – joemaller 2013-03-05 05:06:58

Michael's answer-webkit-backface-visibility: hidden;當我們遇到這個問題時就工作了。我們的<body>標籤上有translateZ(0px)，以防止iOS 3.1.3和更早版本的IFRAME邊界問題，並導致動畫閃爍。將-webkit-backface-visibility: hidden;添加到我們動畫的每個元素都會修正閃爍！拯救生命。

來源

2010-09-11 03:38:36

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

來源

2010-10-14 14:33:23

這對我來說是這樣的，但是我不得不將它應用在'＃wrapper'元素上，因爲在body上應用會使佈局變得糟糕。 – adamJLev 2011-08-19 14:31:09

如果有人想看到背面「-webkit-backface-visibility：hidden;」沒有用，但這個是完美的。謝謝！ – Nachtgold 2013-04-22 17:06:43

完美。 '-webkit-backface-visibility：hidden;'導致任何比例轉換變得模糊。 'body {-webkit-transform：translate3d（0,0,0）;}'工作過。 – Liam 2013-08-27 09:27:56

我的情況的實際答案就在這裏。有人接近：-webkit-backface-visibility：hidden;但真正的答案是-webkit-backface-visibility：hidden;需要添加到父格。

來源

2012-07-02 11:21:06

我實際上需要爲父div，動畫div和動畫div的子元素添加'-webkit-backface-visibility：hidden;'。一旦我這樣做，它完美無瑕。 – mattstuehler 2013-03-12 13:36:50

太棒了，這終於奏效了！謝謝！ – joern 2013-03-13 14:29:38

我認爲通過將其添加到父項中也可以解決我的閃爍問題。它實際上做了什麼？ – chovy 2013-10-01 06:27:32

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

我注意到，當我在div上懸停狀態時，頁面會閃爍，即使我沒有附加任何css或js。也許這有助於別人。

來源

2013-04-08 23:05:08 Jesse

對我來說，這是一個竅門。其他人只在轉換到位時才相關。 – Nadav 2013-08-01 19:01:45

我也有一個「閃爍」的CSS轉換問題。有問題的動畫是從屏幕外滑入的菜單，當動畫完成時，整個菜單閃爍/閃爍。

事實證明，這是由於一個實際的iOS功能，"tap highlight"，由於某種原因，在CSS動畫完成後（即在實際點按之後）踢入的，並突出顯示了整個菜單而不是僅顯示了整個菜單被挖掘的元素。我通過完全禁用自來水亮點「固定」的問題，如所描述here：

-webkit-tap-highlight-color: rgba(0,0,0,0);

來源

2013-04-29 15:07:38 fresskoma

這裏有一個新的解決方案。我使用jQuery設置背景圖像，並且沒有任何3d渲染技巧可以工作。所以我嘗試使用類來定義屬性。瞧！像黃油一樣光滑。

這會導致閃爍：

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

而是做：

$('#banner').attr('class', '.slide-1');

與類中定義：

#banner { -webkit-transition: background-image .25s; } 
.slide-1 { background-image: url("slide_1.jpg"); } 
.slide-2 { background-image: url("slide_2.jpg"); }

來源

2013-09-07 17:59:51 mattwad

試試這個解決方案。它爲我在的PhoneGap + JQM 1.4.0：

更改此<meta name="viewport" content="width=device-width, initial-scale=1">

爲了這個：

<meta name="viewport" content="width=device-width, user-scalable=no" />

來源

2014-04-03 13:48:37

我花了很多時間試圖找出這個問題灰燼動畫奧特萊斯，PhoneGap和iOS設置。

雖然很簡單，但我必須爲包含在css動畫中的每個頂級父元素添加背景。換句話說，確保你的視圖中沒有任何一個元素沒有背景。

我的設置是這樣爲每個模板，所有三個要素有背景顏色分配給他們：

<header></header> <body class="content"></body> <footer></footer>

來源

2014-06-16 18:24:38 kenorvick

如果有人發現背面能見度不工作，你可以看看屬性已經在你的動畫元素上。對於我們來說，我們發現absolute或fixed定位元素上的overflow-y: scroll在iOS上導致嚴重閃爍。

簡單地刪除overflow-y: scroll固定它。

來源

2014-07-08 01:53:12 KendallB

刪除'overflow-y：scroll'幫助我case。非常感謝你！ – YemSalat 2015-01-20 05:28:05

這可能也是我的情況，但我不能刪除溢出 - 對這個元素的絕對位置。 – 2016-02-28 13:52:06

而不是將過渡應用於「全部」，只需指定您真正需要的過渡。它消除了我的情況下的閃爍。

來源

2015-09-02 08:54:17

即使我有-webkit-transform-style: preserve-3d;和-webkit-backface-visibility: hidden閃爍仍在發生。我的情況是z-index。增加活動元素確實有幫助。

來源

2015-11-17 14:05:14 Morpheus

我嘗試了上述所有操作，但Firefox和Chrome仍然存在重大閃爍問題。我修復了這個問題，或者至少通過刪除在動畫過程中導致許多重繪的盒陰影轉換，至少大大減少了它可接受的問題。我跟着這一點，修改了我的需求：

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

來源

2016-06-07 12:11:29 d1ch0t0my

對我來說，通過刪除will-change: transform;的動畫元素解決野生動物園閃爍的問題。

我也可以通過添加overflow: hidden;父解決這個問題，但與此，與transform: translateZ()所有元素有無效

來源

2016-07-28 12:12:30

我不得不使用的實際值（而不是0）：

.no-flick{ 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform:translateZ(0.1px); 
    transform: translateZ(0.1px); /* needs an actual value */ 
}

實施例：

<div class="foo no-flick"></div>

From what I've read，閃爍是由硬件和軟件之間的瀏覽器切換引起渲染。我認爲瀏覽器製造商知道老年人「translate3d（0,0,0）」強制硬件渲染 - 所以他們現在可能會忽略這些假值。

=>使用實際值可能導致事情「粘住」。

無論如何，爲我工作。

來源

2017-06-24 00:21:16 bob

我在使用默認Android Web瀏覽器時執行幻燈片切換時遇到了閃爍現象。

我用下面的過渡CSS：

-webkit-transition: all 2s; 
-webkit-transform: translate(100%,0);

在這個線程中提到的解決方法都沒有幫助解決這一問題。最後我找到了解決方案。閃爍的來源是關鍵字全部，這意味着執行所有可能的轉換。我已經改變了它只執行轉型問題已經解決：

-webkit-transition: -webkit-transform 2s; 
-webkit-transform: translate(100%,0);

來源

2018-01-16 12:52:35 Jusid

iPhone的WebKit CSS動畫導致閃爍

回答

相關問題