Develop Reference

Sencha touch lib not working on Chrome 43

I have built hybrid app with Sencha touch 2.3 and till recent it was working fine but i recently updated the Android System Webview via Play Store (i have moto g running android 5.0.1) and now i am encountering various bugs in UI as follows :
The selectfield picker does not work correctly now. It behaves randomly. The store bound to it has data but no items are displayed in the picker when it opens. At times items do get displayed but you cannot select the items at bottom because picker always resets the selection to the item at top.
Few screens show up blank initially when rendered for the first time. As soon as user touches the screen and moves a little bit the whole screen/view becomes visible.
Also there might be other things that might have broken after updating the webview which i might not have discovered but this a big issue as far as developing for android is concerned with sencha touch. The webview updates are now pushed Over the Air and hence many things may break in future.
I also confirmed the above bugs in older versions of android wherein the webview has not been updated and the above bugs do not show up in.
I am thinking of using crosswalk as the solution to the issues with the webview. Anyone with the same issues or any tips regarding a fix ?

I ran into a similar issue with my Sencha Touch app (almost nothing rendered). Here is the workaround I used which seems to work great:
http://trevorbrindle.com/chrome-43-broke-sencha/

Thanks #Ian. The link was tremendously helpful and it solved the issue for now. Sencha has not officially released a build with these fixes so the overrides are the only solution right now.
For anyone facing same issues here is one more link from the Sencha Forums where all the issues sencha frameworks are facing with Chrome 43 are stated and solved.
https://www.sencha.com/forum/announcement.php?f=92&a=58

I am also stuck with same issue and i found solution we should not update the chrome. Better download 42.0.2311.152_chrome64_installer which is offline exe for chrome.

Custom font working on android emulator but not on device. (Phonegap)

I'm currently building a Phonegap App, and I'm trying to include fonts with css as follows:
#font-face {
font-family: "ostrich";
src: url("fonts/Ostrich.ttf") format("truetype");
}
This works on my emulator running on a Nexus S running Android 4.4.2, however it does not work on my physical Samsung S3, running on Android 4.3.
I have tried to fix it by copying my fonts folder into my assets directory and accessing it as "file:///android_asset/fonts/Ostrich.ttf", and once again, this seems to work in my emulator, but not on my device.
I might be doing something wrong, but if it's a bug, what would be a walk-around for this? I would really appreciate your help.
Thank you very much.
Edit 1:
I've browsed plenty of questions in StackOverflow already that try to address this problem. I have noticed that the one they link the most is this one how use custom fonts in phonegap - however they mention it does not seem to work for Android 4+, however it does work in my Emulator, it just doesn't work on my physical device...

After wrestling with my phone for hours I found this answer which basically shows that there's a bug for Android 4.3 which just makes this a pain in the ass. Surprisingly the walkaround is easy, you just have to wrap your fonts with the #media only screen {} and include svg fonts instead. That should do :)
Thank you very much, and good luck. Hope that if you have this problem you find this answer faster than I did.

jsignature signature not displaying on Samsung Galaxy S4

Using jSignature (https://github.com/willowsystems/jSignature) within a PhoneGap, JQuery Mobile application.
When trying to sign in the content div using the Samsung Galaxy S4 the drawn line is not displaying. The signature is there when I pull the data but is for some reason not displaying. Any ideas why this might be? It has been working on other devices such as Samsung Galaxy S3, iPhone, and iPad.
<script>
var signatureContentDiv = $("#signatureContentDiv");
signatureContentDiv.html("");
signatureContentDiv.jSignature();
</script>
<div id="signatureContentDiv"></div>

I have also just run into this. For me, the error appears on the Galaxy Note 2.0 while running Chrome. I tried changing to Firefox and it works properly. The same behavior is noted when trying the demo directly on jSignatures site. I would suggest checking against their site and seeing if your device works properly to eliminate your code being the issue.
Hopefully this will get fixed.
Additional Info: I have just determined that it seems to be based on the dimensions of the image. Anything over 66,000 pixels (such as 600x110) will cause the failure. This still seems to only happen on certain devices, all running the same version of Chrome.

Interesting that I wind up responding to the last thread I answered about this issue almost 2 years ago.
It seems the most recent update to Chrome on Android (V 43.0.2357.78) causes new failures to jSignature. If the page is in it's native size (no browser zooming), it works properly. If you zoom the screen, it fails. This is new behavior (on existing code). Other browsers seem to work properly.

PhoneGap - Bad Performance compared to Browser on Android

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" :)

Android WebView VS Phone Browser

I've experienced a LOT of strange behaviours with using WebView in Android and I'm wondering why there are so many diffrences between the WebView and the Browserinstalled on each phone?
As an example, I've developed some applications that had to display HTML content, which contained either jquery-mobile, flash,javascript, YouTube embedded and so on. So I had a lot of problems with displaying this pages inside WebViews. Either they wouldn't get displayed at all, just blank, either the videos won't play and so on. And the strange thing is that they work properly if opened in the Browser installed on the phone. I had JavaScript enabled, I tried diffrent WebSettings, I had set the WebChromeClient and WebViewClient looking for javascript errors... but nothing worked.
So I got to the conclusion that the WebView component is completely different from the Browser application installed on the phones. I'm thinking that every manufacturer makes their own Browser to support as many as possible pages, and the WebView remains the standard one, included in the Android SDK.
Am I right? Or there is another reasons/explanation for this?
Thanks.
EDIT: Everything that #ondoteam has suggested was enabled and set at the time being. I no longer have the references to that websites, which anyway were internal.

This article outlines your speculation about stock browser differences between manufacturers, that absolutely is true: 5 reality checks every team needs before working on Android webkit
...which does cause trouble and mysterious/difficult to diagnose/solve problems.
As far as your issues with your WebView implementation:
Version of jquery-mobile may be an issue jquery-mobile loaded into an android WebView if you are using jquery.mobile-1.0.1.min.js you may want to try the uncompressed jquery.mobile-1.0.1.js
And Flash :-/ Good luck:
Screen blinking when using a webview with flash
Flash in WebView not working on Android 3.2
Flash video not displaying in WebView for Android 3.0.1
For loading SWF:
Load an SWF into a WebView
loading flash files (.swf) webview in android
Good luck with that, seems like a lot of variables with devices, Android versions, etc. And will take persistence with trial/error.

The stock browser and WebView differs .Using all the tweaks like
WebView browser;
browser.clearFormData();
browser.clearHistory();
browser.clearCache(true);
browser.getSettings().setAppCacheEnabled(true);
browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
browser.setWebChromeClient(new WebChromeClient());
still it does not load high resolution images properly which is being loaded perfectly well by the android browser.
Only part of the image can be visible on the webview screen which appears fully on normal android browser.
This behavior is observed with latest Android 4X SDK as well.
Which means android default browser significantly tweaks the webkit/webview code to show any url

WebView by default is restricted. You should call setWebChromeClient and family to have a decent browsing experience. In addition, don't forget setJavaScriptEnabled() and other similar stuff. Sorry for my brevity... I think that you don't need examples.
http://developer.android.com/reference/android/webkit/WebView.html

have you checked this question : jquery-mobile loaded into an android WebView
it might be that you're using the wrong libraries. Just check in any case.