Fixing the nasty UX “Swipe” bug on WebWorks based apps

If you have been developing HTML5 based apps for the BlackBerry PlayBook (or BlackBerry 10 Smartphone), you may have encountered this bug. I just simply call it the “Swipe” bug because when you swipe your index finger from the top to the middle of the screen the whole “container” swipes down and lo! A nasty grey canvas appears and then returns to its normal position after a short time.

Let me show you a sample of this bug, all of the screenshots below are available for download on the App World. So let me use my app as my first example:
My holy Rosary

My Holy Rosary – The app where you can pray the rosary on your playbook looks nice and beautiful but not until you drag your index finger downward and this will be the result of that action:
My holy Rosary

Or if you feel like playing the app, you might want to drag it upwards and this will happen next:
My holy Rosary

I KNOW that feeling bro. That beautiful app has turned into a rubber band toy where your users might get annoyed while reading a certain long paragraph or text within your app.

No, it’s not just my app. Let me show you another example:

MMDA for PlayBook. A useful app that shows traffic information in the metro looks amazing from here.

Don’t just drAG THAT FINGER DOWN! NOOooooooooo…

That “Told ya so…” comes in.¬† But wait… What’s that? Why did that happened?

Mr. Browser, what have you done?

If you’re a proud owner of an BlackBerry PlayBook Tablet or that sleek looking dev alpha device, you might have used that built-in browser (I dunno, maybe it’s one of your favorites, too) But did you know, you can reproduce the same glitch on an ordinary website?

Let me show you an example.

This innocent looking news site will be pwned….

 


..pwned.

But why?! Because WebWorks based apps are no different from websites, thus the same browser rendering will be applied! *Dun dun dun dun*

So, you ask me. How do we fix this once and for all?

Think Mobile. A tablet is a mobile device. It’s not a full fledged computer nor it would be classified as a smartphone. It’s a tablet. Though sometimes you would see it renders some websites¬† in desktop mode, but that doesn’t mean your device is a desktop computer. Again, It’s a tablet and it has a 1024 x 768 resolution. Once the browser engine has sensed that the page it will load is bigger than its current resolution, it will show you half of the page and once you scroll it down, like an ordinary website, the whole page will move just for the sake of rendering the whole content.

The solution: Have a Master container!

And that Master container must be designed to be static-fluid. Static-Fluid, eh? Let me explain it to you: Static, in a sense that the width and height of your Master container MUST BE EQUAL to the device’s width & height. Fluid because we don’t know if RIM would release a 10″ BlackBerry PlayBook. But just in case the rumors were true, and one day RIM would release one, at least we know that our app would beautifully scale to that bigger canvas. You would hold that 10″ tablet with pride, knowing our app works perfectly. Damn i want one.

The Second container would hold our main content. But don’t forget to include overflow: hidden!

In code (Feel free to explore!) :

HTML:

<div id=”master-container”>

<div id=”second-container”> <!– !!! THIS WHERE THE AWESOMENESS COMES IN!!!¬† –></div>

</div>

 

CSS:

#master-container

{

width: 100%;

height:100%;

padding:0;

}

#second-container

{

overflow:hidden;

}

I also made an app that works perfectly on BlackBerry Smartphones & tablet and it doesn’t have this glitch because it uses the same pattern.

Meet WebGeek Feeds. An app that was made for just 5 minutes using BlackBerry App Generator and it works perfectly smooth!

I also assume that this idea would also works with the upcoming BlackBerry 10 O.S. And also, you can find inspiration using bbUi.js. :)

That’s it! Hope you learned something from this lightning post, Feel free to explore WebWorks and Let me know if you have any concerns, ideas and more in the comments section below! :)

You can follow me on twitter: @aaroncajes

One thought on “Fixing the nasty UX “Swipe” bug on WebWorks based apps

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>