Mobile webkit CSS vs JavaScript performance

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?

Maybe the tip for canvas also helps with CSS? 29a.ch/2011/5/27/… — a paid nerd
– a paid nerd, Commented Jul 15, 2011 at 3:53

Rich Bradshaw · Accepted Answer · 2011-07-14 19:32:50Z

6

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!

answered Jul 14, 2011 at 19:32

Rich Bradshaw

73.3k46 gold badges190 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Winfield Trail Over a year ago

Beautiful. This is literally the answer I was preparing in my head when I scrolled down. I love it when that happens.

nicholas Over a year ago

Worked like a dream. translate3d is so much faster. +10

Radu · Accepted Answer · 2011-07-14 19:24:11Z

1

I would recommend trying it with canvas.

Two examples:

answered Jul 14, 2011 at 19:24

Radu

8,7098 gold badges58 silver badges94 bronze badges

Collectives™ on Stack Overflow

Mobile webkit CSS vs JavaScript performance

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related