flashing black squares on a web app with css transitions

Question

I am working on a web app for mobile phones. The app consists of multiple sliding panels (horizontal), with clickable elements on each panel. I am using touchstart, touchmove, touchend events to capture touch events, and "-webkit-transform: translate3d" to actually move the elements (using Brad Birdsall's swipe.js for horizontal swipe - https://github.com/bradbirdsall/Swipe). I also added a fading slideshow to the front pannel. The images animated using css to slide and fade in and out:

@-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;
}

After adding a couple of these effects, the app now does not load correctly more than 50% of the time. As the browser loads, there are random black rectangles flashing at different places on the screen (see attached screenshots for some examples). Sometimes they flash for a couple of seconds and then go away, but sometimes they continue moving around, causing all the animations to become very slow and jittery.

Here are sample screenshots of what I am seeing. The squares keep moving around the screen:

This problem actually only happens on the samsung galaxy android phones, on the default android browser (chrome works perfectly fine, but I need it to work in the default browser). Everything works perfectly on the iphone, and works okay on all other androids that I tested so far. And on the samsung - occasionally everything loads correctly, but most of the time it doesn't. I tried getting rid of some animations, but the problem is so inconsistent. If I keep refreshing without changing the code, I am bound to see it at some point.

Has anyone had this problem before? I made a simplified version of the app, with just 2 sliding panels and a slideshow on the front panel. The code is on github: https://github.com/mashabelyi/css-transitions-test. You can access the app on your phone at www.webitap.com/test

The black rectangles appear less often in this simplified version, which makes me think that it has something to do with the amount of content that is being loaded. Sometimes they appear in the beginning, and then go away. I am doing a lot of javascript DOM manipulations on the elements, to ensure that the app fits any screen size. Could this be a potential cause of the problem? I tried using translateX instead of translate3d and triggering hardware acceleration once by calling translate3d(0,0,0), but the problem persists.

Any insight will be greatly appreciated!

Answer 1

I solved the issue! Turns out the images I was using were too large. I compressed the images, and now everything works very well.