Question

I am currently working on a mobile app in Backbone.js using Zepto.js for animations, and during page transition there is a noticible white flicker, and it’s quite visually displeasing. I can’t seem to figure it, anyone have an idea why this might be happening?

My animation code is the following:

var $old = $('.page').not(this.el);

        //This fix was hard-won, just doing .css(property, '') doesn't work!
        $old.get(0).style["margin-left"] = ""
        $old.get(0).style["-webkit-transform"] = ""

        this.$el.appendTo('body').hide();
        this.$el.show().css({"margin-left": 320 * direction_coefficient});
        var that=this;
        that.$el.anim({translateX: -320 * direction_coefficient +'px'}, 0.3, 'ease-out');
        $old.anim({translateX: -320 * direction_coefficient + 'px'}, 0.3, 'ease-out', function() {
            $old.remove();
            //$('.page').css({"position": "static"});
        });

Answer 1

set the backface visibility of animated element (page view?) to hidden to prevent flickering

-webkit-backface-visibility: hidden;

if this doesn’t work you might want to try to use on body or animated element

-webkit-transform:translate3d(0,0,0);

which will prevent turning body or your element into GPU accelerated layer which rasterizes it for animating and this is where flicker might happen as normal elements are turned into an animated layer.