Web and WebWorks Development

[peardox]

A very interesting fact to come out of the Optimization Lab @ JamSterdam was that you can switch on hardware scrolling for a div

Say you've got a div that currently looks like this...

#scrollstuff {

    overflow: scroll;
    }

Change it to this....

#scrollstuff {

    overflow: scroll;
    -webkit-overflow-scrolling: touch;

    }

The BB10 (not sure about others) use that CSS switch to enable hardware scrolling of the given div

It'd be cool to find out if there are any other similar similar hardware tweaks - sorry, this is the only one I know about

[HINOTORI]

Thank you for this snippet! That's interesting and not just for apps. I'll give it a try on one large community website and report the results on Tuesday, testing Android, BlackBerry 10 VM, PlayBook and iOS.

Just yesterday I've read in some jQuery Mobile notes, that they use for the upcoming version some CSS 3D effects for hardware acceleration.

[chadtatro]

Just wanted to point out that we have a DevBlog post on this as well for those who might have missed it - http://devblog.blackberry.com/2013/01/overflow-scrolling-hardware-acceleration/

[erikjohnzon]

Here is another one to add to your list:

-webkit-transform: translatez(0);

This will trick the GPU into doing the computation and should be much smoother and faster. a warning though: there are side effects in most browsers when doing this since it creates a new CSS stacking context which can effect Z index values and some other strange cases.

[interfaSys]

Why isn't overflow HW acceleration enabled by default?

[HINOTORI]

So, here are the results from my tests with a community website:

-webkit-overflow-scrolling: touch;
Chrome for Android 4.2: the content stuck (a css failure by some properties?)
Safari for iOS 5/6: no difference (by default activated?)
PlayBook browser: no difference
BB10 Simulator: slight difference

I will make further tests in the coming days.

[chadtatro]

This video will show you the performance difference

http://devblog.blackberry.com/2013/01/overflow-scrolling-hardware-acceleration/

[peardox]

I'm fairly sure the hardware switches are for BB10 (which will eventally hit the PB)

Makes a big difference on a Dev Alpha - not surprising it's hardly affecting a Sim as it won't have the GPU

At the session I attended we were measuring FPS (took a while to realize what we were seeing owing to the nature of the test code - all text)

[HINOTORI]

Okay, in this case the tests make no sense as I have no BB10 device yet. I had the impression, that it is a feature of WebKit.

[peardox]

They've taken webjit and modified it heavily - this prob explains why you may see some small difference on a Sim on a PC with a decent GPU I guess

If you check html5test for mobiles you'll see it beats everything going (and that's not checking for stuff like this I guess)

[Adam - can you jump in here + explain what's going on pls]