I'm working on an update for an app (implementing immersive mode) but I'm having issues with the webview as soon as I change the targetSdkVersion in the androidmanifest file.
At first it only rendered the background color. It did load the resources because I could see that happening in the debug console but it just didn't show anything. So I googled a bit and found an answer that stated I should disable hardware accelaration like this:
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Now it does show content but really tiny, as if the webview was zoomed out to 25% or something like that. Also it shows some sort of grid..?
I've attached two screenshots (taken with my phone which is actually too small for the layout but I didn't have my tablet around). The first is with targetSdkVersion=18 (and looks like it should), the second is targetSdkVersion=19 and is broken.
help?
Thanks,
Related
I recently started developing in Unity and I like it a lot so far, but there is this one bug, I can't tell where it comes from and similar reports of others I read didn't help me.
The problem is that buttons sometimes (almost always by now, not so often in earlier versions of my project) are straight up black and have very dark grey text in them, which is completely different from how they are supposed to look like.
Even if I put all buttons of the color to straight white, this happens - only in Android btw! (Not tested in iOS, but it's neither happening in the editor, nor in desktop builds.
As I said, this seems to happen more often, now that the game got bigger, has more buttons etc. - so I would guess that is has something to do with setting the Source Image of those buttons to UISprite. Also this does not happen to buttons that have an actual image as Source Image, not the default UISprite.
So this is an example of how it is supposed to look like
And this is how it actually looks like:
Has someone got an idea? I assume it is something about loading the UISprite.
According to your comment, the correct answer was what I thought (see my comment).
Too big textures are hardly supported by Android devices, because of the heavy memory consumption. Scaling down all textures should solve the problem. You can also simply add a lower scale of the texture and switch it before rendering if the device is a mobile. Add a script to your buttons and insert this :
public Image loweredSprite;
public Button button;
void Start() {
#if UNITY_ANDROID
button.image.overrideSprite(loweredSprite);
#endif
}
I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?
Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.
The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/
I am building a web app with a cool looking search input. However when I click the input to start typing the input box gets highlighted with a blue border which is fine and it looks good, but in addition to this a white rectangle with an orange border appears over text input and it looks really bad.
I've tried several solutions to this and none of them work. (The CSS styling solutions changing alpha to 0 ect.) [But if you can get those to work on android 4.0 and/or higher then maybe I was doing it wrong and I'll try again]
Others have said that those solutions don't work on the newer Android OS's, which has been my experience as well. I'm personally running Android 4.0.4.
--- Replication of Problem ---
My Android Application & Native Android Browser ...
Chrome Browser for Android ... [ Works fine! ]
Since it works in Chrome then it must be possible to fix. I had thought Chrome was open source so I tried to find their source code so I could possibly find a solution. Source for Android Chrome is not available so it's not open source.
Have you tried setting the outline style to none on focus? You said you have tried css solutions but what have you tried?
It looks to me like an outline on focus which is pretty standard and can be overwritten with
outline: none;
box-shadow: none; /* If this is a box shadow - clear it with this */
Digging into google.com, they don't have a highlight on their input. What they do have is this:
-webkit-tap-highlight-color: rgba(0,0,0,0);
That clears the ugly orange, misshapen rectangle.
re: this fix:
input:focus { -webkit-user-modify: read-write-plaintext-only; }
I tested this on an s3 running 4.0.4 (we were having another problem related to input fields)
It causes an issue whereby text doesn't fill the fields properly when predictive text is turned on, i wouldn't recommend using it.
The issue with input not filling the fields properly (only the first character of every word you type gets entered after you press space!!) is also triggered by having input fields within an element with absolute positioning..
This was the cause of our original issue - probably worthy of another stack overflow post.
I don't think this is related to css/javascript.
I have already seen this behaviour when I enabled "Improve Web accessibility" in the device settings.
Try to go in your device general settings (not the browser's settings), Accessibility, and check if you have something like "Improve Web Accessibility" (Sorry, my device langage is french, I am not sure of the exact name in english).
When this option is checked, you will see big orange borders around editable / clickable content on web pages.
Don't know if someone already saw this bug. Note that this only happens with Android 4.x stock browser. It has been tested successfully with Chrome on Android 4, stock browser on previous versions, iOS, Blackberry OS6 & 7, Playbook, ...
Look at http://www.hello-gurus.com/labs/sandbox/plain-form.html
It works fine in the simulator (see http://cl.ly/image/1z3G1T2y2p2c) but goes totally wrong on the latest GalaxyTag (see http://cl.ly/image/1O123A3d0y3q)
Normal behavior should be text staying on the right. A padding on the left keeps the text to overlap with label. Input is 100% width so active zone is on the entire width.
That's how it works on every other browser, where Android stock one aligns it on the left only when focus! Plus, it makes the disappear even if the input has a transparent background :S
Even worse, sometimes its value get empty on blur x_X
This is getting me insane!
Any solution or anything i may give a try?
Thanks a lot!
I'd encountered a similar problem where a ghost field would appear on the Android devices on focussing an input field. This CSS for input fields solved my problem:
input[type='text'] { -webkit-user-modify: read-write-plaintext-only; }
Might be worthwhile giving this a try.
That is quite odd. Have you tried adjusting your css? It is possible to achieve the same desired layout but with a different approach.
Example:
for your labels:
remove -- position:absolute;
add -- display:inline-block;
change -- width:25%;
for your inputs:
change -- width:70%;
I setup something similar (static content) and it seems to be working for me.
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?