The Android Browser can't scroll inner divs. That means using SlickGrid with its default configuration is impossible.
Fortunately, SlickGrid has an autoHeight argument that makes it not use inner scrollable content, so it works on the android. Unfortunately, when autoHeight is enabled, onViewportChanged gets called once to span the entire viewport and is never called again, so it attempts to load all the data at once. I'm lazy-loading and displaying so much remote data that if you try and load it all at once it crashes mobile devices, so that's a no go.
If SlickGrid were smart enough to know what's on the screen even if autoHeight is enabled, that would solve my problem. I'd love it if that was a feature in core, since that would solve many problems on the desktop as well as on Android devices.
I also tried using iScroll 4 to get around the Android limitation. Unfortunately, it doesn't trigger onViewportChanged at all when I use iScroll.
I will probably have to solve this by ditching or modifying onViewportChanged to handle my own scrolling events. I was wondering if there is an existing solution for this though.
I ended up writing my own version of slickgrid for this purpose. Also, this will become irrelevant when Google Chrome becomes the default browser, as it actually has decent support for scrolling.
I would not recommend using SlickGrid for apps/pages targeting mobile devices. The grid was not developed with mobile devices in mind. They require a completely different approach optimized for that particular use case.
Related
We have an HTML5-base app that's running in PhoneGap, using (mostly) jQuery for the components. Fairly regularly, the UI will be changed in javascirpt, but not completely render correctly. You kind of need to nudge it with another touch event, which causes it to "remember" to redraw everything. I suspect its some attempt to optimize the draw, but it forgets to update other parts of the screen that were changed.
I'm going to start modifying different css settings in the hope that it turns out to be some kind of simple bug, but I'm surprised that this isn't reported more widely (which makes me think this is due to a "magic combo" of css attributes).
So far the vast majority of testing has been on ICS. I don't have a 2.x device handy right now, but will try that tomorrow. My phone updated to Jelly Bean, so I'll try that and see if anything is different.
Will try to post a screenshot later.
Thanks in advance.
UPDATE
This works fine in Jelly Bean. I did a search in the public Android bug DB but nothing turned up. I'll have to dig out another phone with ICS on it and try different CSS settings and see if it goes away.
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
I built a complex forms over data mobile application and am now looking for a solution to persist the position of the title and the footer bar. In my dummy, which has been developed and tested with Chrome and Safari on my desktop, I just positioned the header and the footer absolute, as well as the content section, which height is set by JavaScript on the windows' resize event.
That's not a proper way for the mobile world, because overflow:auto isn't supported on mobile WebKit.
I tried some things by my own and I took also a look at iScroll. In fact, iScroll crashed safari on my iPad while the application without that component runs quite smooth. I have a lot of relatively complex forms, which may be a challange for iScroll, which can't be won I think.
So I am looking for other ways to achieve my goal (persist header and footer) without letting the user use two fingers for scrolling (in fact, almost nobody knows that "trick").
Any suggestions?
Thanks!
So there are three commonly mentioned solutions:
iScroll
YUI ScrollView
Scrollability
They're all very neat for scrolling through simple lists. But no one really works if it's purpose is to handle full pages with more than just a list, for example complex dialogs with dynamic forms and so on.
I just decided to give up and wait a year - Apple has lately announced its support for position:fixed and overflow:scroll, which will revolutionize this part and solve all that kind of problems we have today.
Today I remembered a website of a company in our building here in Munich, opened it with the iPad, and indeed, it had a scrollable news section on its frontpage. So I looked inside and saw that it is using ... tadaaa ... jScrollPane.
I don't think jScrollPane was developed for using it on mobile devices, but it has been optimized for that purpose, too. It just works on my iPad, my Android 2.3 and also on the latest Opera Mobile.
It doesn't feel like scrolling a native app on a mobile device, but it allows you to see a fully customizable scrollbar, jump to top and to buttom and, what's most important, to scroll with one finger.
Very nice.
Mobile webkit now supports scrolling using only CSS. Create a class 'scrollable' and add the following rules:
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Add your 'scrollable' class to any block element that requires scrolling. Webkit Only.
https://github.com/filamentgroup/Overthrow/
Lightweight polyfill based solution that let's modern browsers with overflow:scroll support do their thing.
Still in early phase of development, but works pretty well on the largest affected user base (android 2.2/2.3/iOS<5).
How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.
So I've built a nice, shiny HTML5 application that is targeted at mobile Safari, and Android's default browser. The Android versions I'm testing it on are 2.1 and 2.2.
My app has a textarea on one of its pages, and this textarea tends to have a good amount of text in it at times. Its basically a free-form writing field.
This works as expected in iOS. However on Android, as you type, the screen scrolls wildly up and down on every keystroke, often you can't see what it is you're typing as you type, and you get dizzy from all the jumping around. Furthermore, if the content within the textarea exceeds its height, it appears to be impossible to scroll within it.
Don't even get me started on landscape mode. The above issues are even more pronounced there.
This feels like a bug with Android as there really isn't anything fancy about my textarea. I've stripped it down to the bare essentials, and it behaves the same.
Wondering if anyone else has had this much fun with their textareas on Android, and could maybe give some advice, or at least empathize?
It seems that Google has managed to mostly solve this in the Gmail web interface for Android. I'm guessing there's some JS magic going on because my markup/CSS is identical.
SOLUTION:
The 3D webkit is broken in Android, this is causing this problem. Make sure you are not using -webkit-transform: translate3d(0, 0, 0); or -webkit-backface-visibility: hidden; on anything related to the inputs. :(
If at all possible, you can lockdown the scrolling of the screen while the user is typing by setting the overflow property of body to 'hidden' - you can selectively enable/disable it on focus/blur events. Of course this does mean that your user will not be able to scroll while typing
There is no magic answer. Android keyboard input interactions with web forms is simply horrendous. You have to thread the needle very carefully to make it work properly, and keyboard behavior is not the same across Android versions. But it is possible with a LOT of work (see our Sencha Touch framework for what's possible today - the other mobile web frameworks are tackling the exact same problems too).
I experience this behavior on nearly every page. Here on StackOverflow, on a wordpress blog and many more.
I can only image that this is a usability bug/issue in the android browser and this is why I prefer native UI/application :)