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
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

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
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook
My Carrier: WiFi

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
Posts: 757
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

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/

Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

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
Highlighted
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

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
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook
My Carrier: WiFi

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
Posts: 757
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: Turning on hardware scrolling

This video will show you the performance difference

 

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

 

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

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
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook
My Carrier: WiFi

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
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

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!