I have a game developed using html5 css3. I have used webview to wrap the game as an android app. But the animations is failing when I run it. I tried to search the problem and found that Android only support animations with a single changing property. When multiple animations occur simultaneously then it fails. So this was the reason my game animations are not working and some images disappeared. I also tried using chromeview (user-defined java class) from github instead of webview but it didn't help too. Please help me out to run my game smoothly on android.
From KitKat (Android 4.4) it supports modern HTML5 and CSS features.. More details here
Related
I know this has been asked before but those questions are pretty old now.
I have a "game" that I developed some time ago with WebGL and I want to bring it to Android with a simple WebView.
The problem now is, that it won't really respond to the user input in the WebView (Chrome works just fine. Android 7.1.1) . I guess that's because of WebGL.
So now, as the crosswalk-project has ended a while ago I am searching for an alternative to run WebGL in my application. Or somehow just run my "game" in an Android App.
Do you have any idea of how I could bring it to work?
From 5.0 Android comes with Android System WebView which is being updated and we might call it the Native WebView. WebGL should work there although some of WebGL extensions and WebGL 2 (stats) might not.
The key to make your game work as an application is following.
First you must identify what WebGL version, WebGL extensions, WebGL or Shader capabilities and other HTML5 functionality your game (and the game engine you use) requires.
Then you must find a WebView that supports that functionality. You can simply do that by opening webpages https://html5test.com/ and http://webglreport.com/ with the WebView you want on your Android device. IMPORTANT! If you for example open the webpage with installed Chrome browser, it doesn't guarantee the Native WebView is used! So it is better to write a small custom application to make sure you are testing the WebView you want to use for the game.
In the end you will probably end up with compiling your game in application with custom WebView which will add an additional size to your game.
Other useful informations
Android versions < 5.0 has a Native WebView that doesn't come with updates so it doesn't support WebGL and this will not change. But the Chrome browser (or other installed browsers) is likely to support WebGL there, because it comes with custom WebView.
Samsung really messed up. I mean it, they are customizing Android OS a lot including some black magic with WebViews => Native WebView doesn't work there properly, so custom WebView in your application is must.
We (GAMEE) are using the Native WebView and XWalkView for Samsung and Android < 5.0 and WebGL games are working just fine right now.
I'm trying to inspect an app in Android 4.2 and 4.3, i'm able to inspect this devices using chrome (https://developer.chrome.com/devtools/docs/remote-debugging), but I need to test this on Webview, i didn't find a solution.
Some css are rendering different from newer versions of Android. HTML5 and CSS3 are suported in Android 4.3 webview ??
Currently there is no straight forward way to debug . one solution is to override the onConsoleMessage[which is used to print console statements],onJsAlert [used to show the alerts] methods of WebChromeClient attached to that webview ,get the logs and alerts , based on that upto some extent we can debug. Hope this solution helps you.
I am working on a cross-platform application developed using html5, css3 and angularJS.
I am facing an issue in showing the ScrollBar on android device.
I have used -webkit-overflow-scrolling: touch;
It is working fine on iPAD but its has no effect on android device.
Need help.
Thanks in advance
As you have rightly said, Android native WebView does not "show" a scroll bar when using overflow:scroll|auto. But the scrolling is allowed when you touch and move the container around. So scroll should still work as expected, without the bouncy effect.
Another Android catch is till 4.4, the native WebView is not the one used in Chrome, i.e. ChromeView. So you are going to have to deal with it by using a javascript polyfill, like overthrow.js [http://filamentgroup.github.io/Overthrow/] or iscroll. Personally, iscroll ux sucks on Samsung Galaxy Tabs.
But if you are targetting Android 4.0>=, then this might help https://github.com/pwnall/chromeview. Haven't personally tried it though.
Check out for more details on webview changes https://developers.google.com/chrome/mobile/docs/webview/overview
Android 4.4 (KitKat) includes a new WebView component based on the Chromium open source project. ...[truncated]...., so rendering should be much more consistent between the WebView and Chrome.
As of this writing, -webkit-overflow-scrolling was exclusive to Mobile Safari on iOS 5 and later.
As of mid-2012, the latest Android version (4.1 Jelly Bean) does not support it, but it IS supported in Chrome for Android, which can be downloaded from Google Play (and only supports Android 4.0+). Android 3.0+ supports overflow: scroll, but it's not very snappy.
Referred from : How much support is there for -webkit-overflow-scrolling:touch
I have a web application, not a native Android app, and the animated gif we use as a loading icon doesn't show its animation. I've browsed other sites and it seems that no animated gifs work in Safari mobile on Android, but I've been unable to find a documented confirmation that this is the case. Does anyone know why the android browser doesn't show animated gifs? Is there a workaround for this? I've seen lots of topics about showing animation in a WebView in a native app, but none for straight web apps. Do I have to create the image with css animation?
Thanks very much!
Android uses webkit which is the underlying engine from Safari, not Safari itself.
Historically it has not supported animated GIFs due to the way the graphics are composited, however they can be optionally enabled by the user under the advanced settings of the browser on some more recent devices. That probably does not make them useful to you.
For wide compatibility with various android versions you would probably be better off with a javascript or css animation (not sure if the later works all the way back through the earliest releases).
After running tests with a project I'm working on, I can say that:
gifs display beautifully on iOS devices (I'm testing on an iPhone4 running iOS6 and gifs run smoothly. I have tested on newer devices as well...it only gets better!)
gifs display pretty badly on android (I'm testing on Galaxy S3 running android 4.1). Its even better to display a flat image, the gif animation lags a lot).
Currently I’m developing a webpage for multiple mobile platforms. I use JQuery and JQuery Mobile as library. The page uses only HTML5, CSS3 and JavaScript.
The day picker I’m writing uses the –webkit-transform: transform(0,-20px) function to scroll a list of numbers. This works fine in Chrome, Safari, iOS, Android 2.3.*. But on Android 4.0.1 it changes the order of the different elements. This results in a text jumping in front of the overlay making the spinner ugly. I’ve tried using the z-index but this doesn’t affect the transform animation.
When changing the margin-top instead of the transform works fine on Android 4.0 but I want to use the hardware accelerated css functions.
Is there anyone who could help me with this problem?
Posting some sample code of your css would help alot. I've noticed that android 4.01's browser has some z-index issues that requires some restructuring of your html to get it to work. But until i can see some code i wont be able to troubleshoot anything.