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?
Related
I just found out that if I navigate on my
website with iOS (iphone and ipad) it shows me this -> https://i.stack.imgur.com/9scRZ.jpg
While if I open it with Android it shows me this one (that is the correct one) -> https://i.stack.imgur.com/lW3VR.jpg
All the images, in different pages, that are as background, have this problem (on iphone), the same for the footer that has a background image too. It's like if on iPhone all the background images are super zoomed.
I deleted the cache, I checked all my CSS code and I tried to change pictures, nothing happened.
What else can I do?
Thanks for your advices!
Yes, it could behave differently. Since, we could write different css based on resolution or user-agent (safari for ios, chrome for android).
I just started working with ML5 and machine learning in general. I started by creating an app that classifies images from my webcam using 'MobileNet' image classifier, I then created a my own classifier using Teachable Machine which also worked great. I created my app using cordova, and I used the browser platform as I got started and all worked great.
However once I switched to try the app on android platform, whatever image I try to classify (whether it is taken with my phone camera, or even hard-coded to the html page) always returns the same result with the exact same confidence. But if I switch back to the browser, it works just fine again. I cant seem to find anyone else reporting this kind of problem. Does anyone have any idea what it might be?
I once had the same problem and it turned out that the Android version was having out-of-memory exceptions that weren't being caught or reported.
After debugging using Chrome Developer Tools (by following this), it appears the problem was that the images I was trying to classify were too large to be processed on android (error - webGL: INVALID_VALUE: texImage2D: width or height out of range).
Therefore reducing the size/quality of the images before classifying them resolved the problem.
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'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().
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