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.
Related
I met a problem in android chrome, see the screenshots:
No magnification
Arrow next is under the magnification but not shown
Toolbar is under the magnification but not shown
It is flipbook plugin from http://3dflipbook.net/ in the desktop version. Mobile version does not have magnification so it is ok.
When there was a div as a container - magnification worked well.
Device: Huawei Honor H60-L12 Android 4.4.2 Emotion UI 2.3, chrome - latest.
Also, I noticed unstable work with iframes z-index ordering.
Does anyone know how to fix the magnification?
Best regards,
Ivan
Good news. After one of the chrome updates the issue disappeared.
I want to scrollTo the top using scrollTo(0,0) and it does not show the top position on android kitkat whereas it works well for android 4.3 and below. Any way around to scroll in android 4.4 webview
In Kitkat, chromium browser is used and they have removed many features from webview. Some of these bugs have already been reported to Google. Check the link below:
http://code.google.com/p/android/issues/detail?id=62378
Maybe there's some magic I don't know about with scrolling on Android?
I've got a website that works fine in IE7, IE8, IE9, FireFox, Chrome, AND Safari on desktop. It also works fine in Safari on iPhone.
However, one of my Android 2.3.7 friends informs me that he has Opera and the default browser on his Android. In both of those browsers, the scrollable view doesn't end at the bottom of the page. When you get to the very end where the dark grey footer ends, you can go right past it and see solid cream-colored background going on for miles of scrolling!!
I have NO IDEA what could cause this!
Can anyone throw me a bone here?
Here's the site for anyone who might have Android 2.3.7 or another version of Android to test. Like I said, happens in both default AND opera browsers.
http://wwwa1nbkclientsitecom.zippysites.com/
UPDATE: I removed the overflow-y property from the HTML style tag in the stylesheet. I had another Android 2.* user test it. Its still broken. And now my next guess is that this might be broken due to the fancy floating menu at the top. Early versions of Android only had partial support for position: fixed
I'll try disabling the position: fixed menu and get it tested again.
UPDATE 2: I got it tested. Its still broken. I'm presently installing Google's Android SDK for the Emulator functionality. It'll let me specify old versions of Android to test. If I narrow down the problem, I'll post the answer here. Until then, if anyone has an idea of what's going on, please post your idea!
It works fine for me in the latest version of Chrome on an Android 4.0.4 tablet.
However, I think the problem may lie with the other browsers' interpretation of overflow-y: scroll; on your <html> tag.
Try removing that property. You shouldn't need it on the <html> tag anyway.
It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.
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.