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.
Related
I have a simple standard webview in my android app and when loading a web site the box-shadows are not showing up. It just shows all elements without box-shadow. However, android chrome browser shows all box-shadows with no issue.
here below i attached two screenshots from my webview and android chrome browser that shows the map box-shadow is perfectly rendered in chrome.
Kind Regards
Ramin
Can you please attach an image so that I can give you a better answer.
As I guess the shadow is not forming due to lower API level. You should at least use Android lollipop as minimum to get the shadow effect.
According to https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow, Android Webview's support of inset is implemented with the vendor prefix: -webkit-
So I guess you need to use -webkit-box-shadow.
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'm using Modernizr for fallbacks to CSS Animation but it seems to think that the browser in Android 2.3.5 has support for animations. This means that users get stuck on a page.
I setup a little webpage to test mobile device support. Despite a basic animation not working, the test still passed.
$(document).ready(function(){
if ($('html').hasClass('cssanimations'))
{
alert('I have CSS Animation Support');
}
});
Does anyone know why this is?
According to this post, Android 2.3 supports animating one property at a time. Give that a shot? Here's the test in Modernizr suggesting that Android is crazy.
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
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).