I create a simple Android application using the latest version of Cordova and replace content of www folder by sample code of a memory game written by Igor Minar on Github (https://github.com/IgorMinar/Memory-Game). The problem is the cover image (front side) does not display. The cards always display the content image (back side) for both sides.
Then I create a new Android application without Cordova but use a simple android.webkit.WebView and everything work as expected with similar www content.
I think this is an issue of Cordova Webview. I want to use Cordova because it's a good SDK so I want to ask if someone can give me a solution for this webview issue.
Thanks in advance.
After a long experimentation using this website: http://thewebrocks.com/demos/3D-css-tester/
(source code on github)
and based on the code of #nguyen-canh-linh, which he manages to get working even in Android < 4.4 webview (see on his repository)
I found that you CAN NOT have two css properties animated in the same class - but I was aware of that fact (a bug I read about on the Internet) - I did not realize that the trick needed to avoid flickering in recent webkit version ie: * { transform: translate3d(0,0,0); } was indeed seen as an animation and triggers the bug
Note: also be careful with: backface-visibility: hidden; do not apply it to every element (*), it could be buggy as well.
Related
I am in the process of testing a hybrid app for Android 4.4+. The app consists of
one custom plugin (my own effort)
the HTML UI created using Phonon.
Phonegap CLI v 6.4.2
My test device is a Huwaei Holly running Android 4.4.2
One of the issues I have run into is the fact that the caret in textarea and input controls stops working "after a while" and the soft keyboard does not popup when I tap the control.
By dint of some trial and error I pinned down the problem - it happens AFTER the app has displayed at least one vanilla HTML/JS alert box which I am using for my own debugging needs. Replacing that with a Phonon.alert box - which is simply an overlayed layer of HTML, not a new window as, I imagine, the bog standard alert is - "fixed" the problem.
Very good but the fact that this happens at all still bothers me - I will not use vanilla alerts in my release build but if it happened with alerts it might well happen with something else.
A spot of Googling revealed that is a known issue that appears to have been around for a while. This SO thread, for instance, suggests the Webview has to be set as being focussable and I have run into the same suggestion elsewhere too.
However, it is not at all clear to me just where I should do this. About the only configuration locations I have at my disposal are
The config.xml file for my Phonegap/Cordova project
The plugin.xml file for my custom Phonegap/Cordova plugin
The Phonegap docs related to config.xml do not mention anything about FrameworkLayout, android:focussable etc.
I'd be most grateful to anyone who might be able to either
explain just where the android:focussable bit should go or
suggest the root cause of the problem.
I am using Ionic first time for Android App and also post a question(Ionic: Unable to stack li vertically).
Thing is, Ionic's CSS is bothering and not giving desired result. As suggested in link posted above.
Will it be OK if I discard Ionic's CSS and implement bootstrap's CSS only? technically it is possible. Has anyone do it? What issues could be if I don't call ionic.css file?
If you discard ionic's css most of it's niceties(widgets etc) will break. You want to override it as needed. I have had success using parts of angular-ui-bootstrap and other libraries that depend on bootstrap in Ionic apps. Have a look at this discussion: https://forum.ionicframework.com/t/ionic-twitters-bootstrap-css-framework-again/8269
I have searched high and low for several days for this problem and I just can't figure it out, hopefully someone else has solved this.
The problem is simple, I have created a web-based game using mainly createjs, preloadjs, and soundjs. The plan was to load the content inside a UIWebView on iOS and WebView on Android to create the two apps.
The problem occurs on Android 4.4 and lower. Neither the videos or the sounds are playing. I'm starting with the simplest scenario; I have an image on a web page, attached a preloaded sound to play onclick;
init:
createjs.Sound.registerSound("sounds/sound_must_be_on.mp3", "soundOn");
$('.btn.sound').click(soundMustBeOn);
onclick listener:
function soundMustBeOn() {
createjs.Sound.setMute(false);
createjs.Sound.setVolume(1);
createjs.Sound.play("soundOn");
}
This works perfect on all modern desktop browsers, iOS and Android 5.x and higher. But on Android 4.4 (on a WebView) it just crashes. What have I missed? I have tried Cordova, Phonegap, SoundJS CordovaAudioPlugin, file:// paths, resources outside the android_asset folder, and plenty of other things. My quess is that I have used Phonegap totally wrong, I could really use a "for dummies" example.
Solved it.
I did what I didn't want to do, but I guess it had to be done. I encapsulated my entire web application within Cordova/Phonegap, downloaded and added the CordovaAudioPlugin.js file from SoundJS and simply registered the plugin as others have already done (also updated the file path)
createjs.Sound.registerPlugins([createjs.CordovaAudioPlugin]);
createjs.Sound.registerSound("/android_asset/www/sounds/sound_must_be_on.mp3", "soundOn");
I'm unable to transition from index.html to any pages correctly. All transitions would show an almost empty page with LogCat showing:
"E/libEGL(17550): call to OpenGL ES API with no current context (logged once per thread)"
My code does not contain any video tag or anything like that. All pages work well if I set them as default page in super.loadUrl();
I've also tried on Android 2.3 it still have the same issue. I'm using PhoneGap1.5 and JQM 1.0.1.
Several others have reported the same issue and am wondering if there is any solution to this.
http://forum.jquery.com/topic/cannot-change-page-in-android-3-2-1-honeycomb-jqm-1-1-0
https://groups.google.com/forum/?fromgroups#!topic/phonegap/UNDY3cAJH34
[Update]: I tried a separate project in Aptana without PhoneGap but just JQM. The problem still exists. It seems now is the problem of JQM itself.
problem solved. It is due to JQM's ajax paging behavior. When I disabled the ajax, everthing works fine now.
I just upgraded to PhoneGap 1.0 and jQueryMobile Beta 2 and it seems like file:// navigation is totally borked. I've posted a super stripped-down 2 page example for Android 2.2 here: https://bitbucket.org/uhlenhuthm/pgdemo/overview
DETAILED PROBLEM DESCRIPTION:
I've created a very simple 2 page test application in PhoneGap 1.0 for Android. In my assets/www folder, I have two files: index.html and hola.html. PhoneGap loads the index.html file which contains a single button (see below). Clicking on the button SHOULD load a new page (no AJAX loading), but instead the button just changes color while being tapped and nothing else happens. This only happens when the link has data-ajax="false". Setting data-rel="external" actually has no effect and JQM loads the page using AJAX (another bug). AJAX loading works fine, but that's not what I need (for a more complex project). Including the phonegap.min.js file doesn't fix the problem either.
The weird thing is that this works in the browser (not going through PhoneGap on the phone, it goes to hola.html no problem). Maybe there's something weird with how JQM and PhoneGap deal with file:// URLs?
Am I making a bonehead mistake or is there something really wrong here?
Attempt to give this a read. He points out many different issues with upgrades, this being one of them. Here is a quote detailing what probably is causing this issue: "If you are unable to open a second html page in your app then you're missing the following tag which should be placed in the application tag of your apps AndroidManifest.xml:"
<activity android:name="com.phonegap.DroidGap" android:label="#string/app_name" android:configChanges="orientation|keyboardHidden"><intent-filter></intent-filter></activity>
I hope this helps!