Question

I hae a very simple application. I create bubbles at the bottom of the page and have them floating to the top of the page.

I’ve tried two methods to do this:

1) Using a repeating JavaScript function that loops through the bubbles DOM and uses jQuery to decrease the “top” CSS property:

function frame() {
    $(".bubble").each(function() {
        $(this).css("top", "-=5");
    });
}

2) Using webkit CSS transitions:

.bubble {
    -webkit-transition: top 5s linear;
    top:-200px
}

Both methods work fine on a desktop browser, but neither does very well in a mobile environment. The CSS option is marginally faster, but still not what I’d call good.

Any tips?

Answer 1

Try:

.bubble {
    -webkit-transition: top 5s linear;
    -webkit-transform: translate3d(0px, -200px, 0px);
}

On iOS at least, that will be hardware accelerated. If you want this to be slightly more backward compatible, then:

.bubble {
    -webkit-transition: top 5s linear;
    -webkit-transform3d(0,0,0);
    -webkit-transform: translate(0px, -200px);
}

Will work on browsers without 3d transforms, whilst still getting HW accel. I’d verify that the first one improves performance, then check that the 2nd one also works as well, rather than just using the second one!