Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Turning on hardware scrolling

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

 

 




Click the like button if you find my posts useful!
New Developer
HINOTORI
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook

Re: Turning on hardware scrolling

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.
.LowerCase { } .Names { } #for { } .CSS { } .Classes { } #are { } .BadStyle { }
BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: Turning on hardware scrolling

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/

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Retired
erikjohnzon
Posts: 245
Registered: ‎09-21-2012
My Device: Q10

Re: Turning on hardware scrolling

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.

@erikjohnzon
erjohnson@blackberry.com
Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,

Re: Turning on hardware scrolling

Why isn't overflow HW acceleration enabled by default?

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
New Developer
HINOTORI
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook

Re: Turning on hardware scrolling

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.
.LowerCase { } .Names { } #for { } .CSS { } .Classes { } #are { } .BadStyle { }
BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: Turning on hardware scrolling

This video will show you the performance difference

 

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

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: Turning on hardware scrolling

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)




Click the like button if you find my posts useful!
New Developer
HINOTORI
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook

Re: Turning on hardware scrolling

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.
.LowerCase { } .Names { } #for { } .CSS { } .Classes { } #are { } .BadStyle { }
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: Turning on hardware scrolling

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]




Click the like button if you find my posts useful!