在css轉換的web應用程序上閃爍的黑色方塊

我正在開發一款用於手機的web應用程序。該應用程序由多個滑動面板（水平）組成，每個面板上都有可點擊的元素。我使用touchstart，touchmove，touchend事件來捕獲觸摸事件，並使用「-webkit-transform：translate3d」實際移動元素（使用Brad Birdsall的swipe.js進行水平滑動 - https://github.com/bradbirdsall/Swipe）。我還在前面板上添加了一個淡入淡出的幻燈片。使用CSS動畫的圖像滑動和淡入淡出：在css轉換的web應用程序上閃爍的黑色方塊

@-webkit-keyframes slideLeft{ 
    0% { 
     -webkit-transform: translate3d(0px, 0px, 0px); 
     opacity:0; 
    } 
    30%{ 
     -webkit-transform: translate3d(-60px, 0px, 0px); 
     opacity:1; 
    } 
    70%{ 
     -webkit-transform: translate3d(-140px, 0px, 0px); 
     opacity:1; 
    } 
    100% { 
     -webkit-transform: translate3d(-200px, 0px, 0px); 
     opacity:0; 
    } 
} 

.slideLeft{ 
    -webkit-animation: slideLeft 10000ms linear; 
    -moz-animation: slideLeft 10000ms linear; 
    -o-animation: slideLeft 10000ms linear; 
    animation: slideLeft 10000ms linear; 
}

添加一對夫婦的這些影響後，應用程序現在無法正確加載時間超過50％。隨着瀏覽器加載，屏幕上不同位置會出現隨機黑色矩形閃爍（有關示例，請參閱附加屏幕截圖）。有時他們會閃爍幾秒鐘然後消失，但有時他們會繼續四處移動，導致所有動畫變得非常緩慢和緊張。

以下是我所看到的示例屏幕截圖。該廣場一直在屏幕上移動：

enter image description here

這個問題實際上只發生在三星Galaxy Android手機，在默認的Android瀏覽器（Chrome工作完全正常，但我需要它在默認工作瀏覽器）。一切工作完美的iPhone上，並行之有效的所有其他機器人，我到目前爲止測試。而在三星上 - 偶爾一切正常，但大部分時間沒有。我試圖擺脫一些動畫，但問題是如此不一致。如果我在不改變代碼的情況下保持清爽，我一定會在某個時候看到它。

有沒有人有過這個問題？我做了一個應用程序的簡化版本，只有2個滑動面板和前面板上的幻燈片。代碼在github上： https://github.com/mashabelyi/css-transitions-test。您可以通過www.webitap.com/test在手機上訪問該應用程序

在這個簡化版本中，黑色矩形出現頻率較低，這使我認爲它與正在加載的內容數量有關。有時他們出現在一開始，然後消失。我正在對元素進行大量的javascript DOM操作，以確保該應用適合任何屏幕大小。這是否會成爲問題的潛在原因？我嘗試使用translateX而不是translate3d並通過調用translate3d（0,0,0）觸發硬件加速，但問題仍然存在。

任何有識之士將不勝感激！

來源

2012-09-22 user1690179

我解決了這個問題！原來我使用的圖像太大了。我壓縮了圖像，現在一切正常。

來源

2012-09-23 01:16:39 user1690179

你有沒有經歷與svg圖形相同？我使用從raphael-js動態添加的svgs獲得完全相同的行爲。 –

它可能出於同樣的原因。 svgs太大？ – user1690179

我在svg中沒有任何圖像元素，只有路徑，圓形，漸變等（幾何形狀）。我不會說他們很大，但是我每秒都會做動畫。 –

在css轉換的web應用程序上閃爍的黑色方塊

回答

相關問題