I have an web application, On form submission i wish to show loading image until the next page loads,the issue is with Jelly Bean, it Simply freezes the page 1, after some time it loads the page 2, loader is not at all showing
I tried blockui.js, show/hide div on form submission but no Expected result.
I don't find this issue in other android versions like Gingerbread and ICS.
Note: When i delay my form submission, it shows the loader image.
I think in jelly bean There is a change in web-kit. JB uses the web-kit of chrome. That's why the app runs smoothly on all other versions and it becomes weird when it comes to Jellybean. you need to manage it it any other ways. I also faced somewhat a similar problem when I had done an application compleatly based on html and js. Still i was not able to complete this problem and i need to drop the app due to kind of reasons
Related
I'm working on a Cordova mobile app that uses jQuery Mobile. On this app, we've created buttons using icons from the Font Awesome library. In Chrome, everything works great -- the icons appear as they should. However, if we compile the app and run it on our Android test devices then the icons will start to randomly replace other icons on the same page.
If we use Chrome DevTools to inspect the page while the mobile app is running on the phone, the icons display correctly on the desktop inspector, but not on the mobile device.
Here's a screenshot of the icons displaying correctly. This is from Chrome DevTools inspecting the mobile app while it's running live on the mobile device.
Here's a capture of the same screen taken from the device. I've indicated in red where the differences in icons are.
More pertinent observations and facts:
Our primary test devices are Samsung S7s running Android 7.0 -- all of these devices have this same problem.
The icons do not start to replace one another until we've changed pages a couple times.
It's not consistent which icons get replaced. It will vary each time we fire up the app. One icon that gets replaced one time might be left untouched the next time.
This problem does not occur on our older Android test device (Droid Razr Maxx HD running Android 4.4.2).
I've tried re-compiling the app with the android-targetSdkVersion removed, set to 22 and set to 25. In all instances, the icons continue to swap randomly on the newer Androids.
We've upgraded cordova-android to the latest version (6.2.3 as of writing) and the issue remains.
If I use Chrome DevTools to manually remove the Font Awesome icon CSS class (e.g., fa-user-plus) and then re-add it again, the icon will then display correctly on the device.
We've noticed that sometimes (as you can see in the screenshot below) a small white line might appear underneath an icon that has been replaced.
Does anyone know what might be causing this? Any theories on how it's possible for Chrome DevTools to show one thing while the device shows another would also be helpful.
I stumbled across a solution for this problem while debugging a separate issue on the same app where position:relative elements would disappear while I was scrolling on a mobile device.
While I haven't been testing on an iPad, the solution provided in this question iPad Safari scrolling causes HTML elements to disappear and reappear with a delay fixed both issues.
What I did was apply -webkit-transform: translate3d(0,0,0) to the class .ui-btn (the jQuery Mobile class for buttons). After a re-compile, the icons would no longer randomly swap with one another.
I have little insight as to why -webkit-transform: translate3d(0,0,0) fixes this apparent WebView rendering bug. If anyone has a deeper understanding of what's going on, please leave a comment!
I have 2 weird behaviors, and I think they might be related, but I am not sure..
1) In my phonegap app (Remini), local offline images (icons) sometimes (not always) are not loaded/displayed on Android 4.4.2. For example Look at the difference between the two screen shots:
2) The second problem (in the same Android 4.4.2), is that I when the user picks an image from his gallery (using a non-standard image picker plugin for phonegap), sometimes, the image simply doesn't load. The image paths / URIs are returned to the javascript correctly, and when I am trying to assign these to an .src, the onload event doesn't fire.. In other (lower) versions of Android it worked just fine. Now in order to prevent some anticipated comments - My img.onload event is defined before the img.src assignment, and the plugin works correctly on other versions..
Now, I am not sure the problems are related, but in both cases, there is an unloaded image element, although with different sources..
Does anybody know one of these problems? Are these related?
I'm currently using WebView.draw() to take a screenshot of the entire WebView and save it into a Bitmap (based off of this solution). It has worked perfectly up until now.
I was recently testing this functionality on a Nexus 5 (please note that on the Nexus 5 the WebView in question is bigger than the screen, so the user can scroll both horizontally and vertically) running Lollipop 5.1 and the latest update of Android System WebView (version 42.0.2311.137 at time of writing) when I noticed that the generated bitmap was wrong. It had the correct dimensions but instead of showing the whole WebView, it only had the part of the WebView that was visible to the user when the method was called.
I have tried uninstalling all updates to the Android System WebView (thus bringing it back to version 39 (1743759-arm) and with the factory version the functionality works fine. So this problem is due to a relatively recent update of the Android System WebView. I wasn't able to find a change log so I can't figure out what has changed and how to fix it.
Below is a quick visual explanation:
Has anyone else encountered this problem and found a possible solution ?
You need to call WebView.enableSlowWholeDocumentDraw() before creating any WebViews. That is, if you have any WebViews in your layout, make sure you call this method before calling setContentView() in your onCreate().
Major head scratcher happening today. I developed a Cake app, hosted on Pagoda Box, that runs fine on all browsers except Android native browser on the Galaxy S3. It displays a white screen:
http://broomage.pagodabox.com/sweepstakes/MetsMoments2013
However, I uploaded this app to a standard LAMP server so I could debug it more quickly, and it showed up just fine! See here:
http://epi.qa/broomage/sweepstakes/MetsMoments2013
I'm really mystified at this point, since it now seems specific to Pagoda Box. I've checked the apache/php/cake logs and nothing weird is showing up. I can also "view source" and see that everything seems to be loading properly--only the browser just shows a white screen. This problem also happens on certain sites that use the Bootstrap library, but will sometimes show up if you go to another URL then hit the back button. But this particular site just shows a white screen on the S3 no matter what I do. Any ideas???
Grrr, I think I narrowed it down to a gzip issue: If you are serving certain assets thru a php script, the size may be reported as a mismatch w/ the compressed size, which screws up rendering on lackluster browsers like that of android.
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.