CSS3 Animation Flicker on Android 2.2 (Webkit-Transform:Translate(..) Scale(..) at The Same Time)

CSS3 animation flicker on Android 2.2 (webkit-transform:translate(..) scale(..) at the same time)

it's an open bug. star it to vote for it to be fixed asap.:

http://code.google.com/p/android/issues/detail?id=12451

iPad css3 animation flickers after keyboard use

Ultimately, there really wasn't a fix for this issue. It seems like form elements in WebKit on the iPad cause problems with flickering.

My workaround was that on the onblur of each form element, I refreshed the page using hash tags to ensure it refreshed to the exact same state. It still caused a "flicker" while it was refreshing, but it did keep the screen from flickering throughout the rest of the app.

Any way to get -webkit-transform: rotateY to work on the Android browser?

CSS 3D Transformations are supported starting Android 3.0 ( http://caniuse.com/#transforms3d ).

Chain webkit animation

I use jQuery and Modernizr, then a function like this:

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";  
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

Then call it like this: animate($("#someID"),{"left":"100px"});

Have a look at http://css3.bradshawenterprises.com/legacy/ for a little more detail.

---

Related Topics