I can't figure out the correct setting for a webview to make it fit width!
I've used in my HTML the viewport metatag with device-width option. In webview I've set WideViewPort and LoadWithOverviewMode to true. I've also tried to setInitialScale to 1.0.
All these seem to work in a few phones with android 1.6, 2.1, 2.2
However when I upgraded to 2.2.1 it doesn't work as wanted. I have an horizontal scrolling which I don't want! With a double-tap on the webview it fits, but not automatically when loaded.
Does anyone have any idea what Google changed in Android 2.2.1 webkit?
Not got a clue what Google have done, but I've got the same problem with all my mobile sites on Android 2.2.1 (worked fine with earlier versions).
Could really do with a solution for this as it's bloody annoying me and my clients.
I've tried varying the width property to see how that affects the rendering of the pages and found that in all cases the page renders incorrectly, always adding in a margin of some sort.
With the width set to 320px in the viewport meta tag my Desire HD reports the page width as being 369px.
I can get round the problem by setting initial-scale=1.15 but I've only checked that on my DHD and I really don't want to have to specially detect Android 2.2.1 devices to make them work correctly!
A little off topic but since updating my phone, in addition to the problem you've mentioned, the HTC weather widget no longer updates it's current location, my battery life has reduced by around 30% and my Wifi is playing up.
Having said that I'm so glad they've improved the HD video recording! Wow! (not) :p
Related
CSS' mix-blend-mode seems to fail on Android 9:
Chrome
Webview in Cordova (also Chrome in that case, probably)
It works on:
Chrome on Android 8
Firefox on Android 9
I initially experienced the issue with an SVG element, but I am also able to reproduce it with some simple divs.
A very simple code example:
https://codepen.io/walmink/pen/YoJRqa
I tried to run the example below and get the expected result on a Nexus 5 running Android 8 (left), but it fails on a OnePlus 6 phone running Android 9 (right) (see image). I've had other users (of a game of mine that uses mix-blend-mode) report the same issue on a OnePlus 7 and a Google Pixel 3a XL running Android 9.
It also seems to work fine on any desktop browser I've tried. On Safari, it will blend with the background as well unless you add isolation: isolate, but at least the blending still happens.
Thank you for tracking down that Chrome issue! I've been debugging this all day but missed that one. I'm on a OnePlus 6t. Someone else wasn't able to reproduce on a Pixel 2, but glad to hear it is in fact happening on other devices.
I have a workaround, which I'll also address in that Chromium thread, soon.
Option 1: Force hardware acceleration on the blended element, using something like transform: translate3d(0,0,0);
Option 2: On the blended element, add a will-change property, set to pretty much anything. will-change: opacity; for example, would suffice. This forced re-paint seems to be enough to kick the blend-mode back into gear.
Now, this fixes the problem... but causes another. If you have to do any scrolling more than about one more page length, the blended element will eventually get cut off, and will remain invisible for the rest of the page.
This behavior (or similar) is described here:
https://bugs.chromium.org/p/chromium/issues/detail?id=798148
This one sounds almost identical, but but is marked as fixed.
https://bugs.chromium.org/p/chromium/issues/detail?id=992398 This one also sounds similar, but they've identified as being related to the max size of a layer, which is fairly large (some 8000px). Whereas the behavior you'll find with this workaround, is more like 2000px, or roughly 200% of the height of the viewport (hard to test).
Unfortunately this cut off content behavior is very consistent... That Pixel 2 user I mentioned before, that couldn't reproduce the initial blend-mode issue, was seeing this cut off once the workarounds were applied.
You said you're making a game though, so hopefully there's not much scrolling involved?
Also, for what it's worth, you may find the screen blend mode is exempt from all this and may still work without any workarounds.
You can test with this https://codepen.io/chasebank/pen/wvwWGxd The workarounds are commented out in the .box element.
Good luck!
While testing our site on different devices we found a problem on recent Android versions. There is a bug with textures under the page, where the content ends (actually there is no any content where appears the bug). The bug appears only when the height of the page zoomed out is smaller then the screen of a device. Previous Android versions (4.1 etc) show there just white space (as Apple and Windows mobile devices also do), but 4.4 and later randomly repeats some portions of the site. We tried different viewport metatag options as well as different "height=100%" and "min-height=100%" tricks in CSS with no result. Any ideas on how we can fix it? Thanks.
Screenshot: http://i11.pixs.ru/storage/7/5/4/2jpg_2263155_16706754.jpg
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
Our corporate website is going through some weird shenanigans. It looks fine on any browser when you view it on a desktop pc or laptop. However, when you surf to the website on a mobile device you get these borders around the page elements both in Safari on iOS and Chrome and Android 2.2 Stock Browser in Android.
While looking into the problem I've noticed that the borders also appear on Chrome on a desktop/laptop, but only at certain zoom levels:
100% zoom:
110% zoom:
Weird thing is, the lines aren't consistent throughout the different zoom levels:
This is taken at 90% zoom.
So to clarify: I can reproduce the problem I'm seeing on the mobile devices by zooming around in Google Chrome on a laptop/desktop. But when I load the website on a mobile device, I always see the lines, no matter what the zoom level is.
The entire website is given its lay-out through tables (Yes, I know... It was build ages ago as a template in Typo3 and though we can make small changes to it, rebuilding the entire template is not an option. But this aside.) so I thought it might have something to do with the CSS rules on the tables, but there doesn't seem to be anything wrong with that. And if it were a CSS problem, wouldn't the lines be consistent on the various zoom levels? This is the CSS file for the template: Pastebin
Either way, we're a bit stuck on this not knowing what's causing the issue. If anyone has ever encountered something like this, any enlightment on the issue would be appreciated. Thanks.
Edit:
Just tested this on IE, Firefox and Safari on a desktop. No borders there, no matter what the zoom level is.
Edit2:
Zooming to 500% (Chrome on a desktop) shows that some of the lines are blue, some are white and some are gray, according to the colour scheme of the website. They are also not equal in length and seem to change position when I scroll around the webpage (i.e: move a bit more to the left/right.)
This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")
The solution to that answer suggests you either:
Disable zooming (if you have designed for viewing at that particular size)
Have a 1px overlap on elements (e.g. margin: -1px)
The overlap fix has worked for me in the past, though this might be harder with a table-based layout.
I'm working on a Honeycomb tablet app that needs to scale some UI views as the user interacts with it. So far I've been using Property Animations and it's working pretty well with ImageViews and TextViews but behaves strangely with a WebView.
webView.animate().scaleX(2).setDuration(400);
This code behaves exactly as I want with ImageView and TextView. It smoothly zooms the UI up to double its original size (in this case only in the X direction).
With a WebView it will scale the view to double its original size, but the viewport remains stationary. If I throw a translationX animation in there that doesn't affect the position of the viewport either. How can I get the WebView's contents to scale along with the view?
UPDATE: It turns out that the code I entered here works perfectly in the Android 3.1 emulator. The strange behavior I'm seeing only happens on the actual device. The device I have is a Verizon Motorola Xoom with Android 3.1. I unfortunately don't have any other devices to test it on so I don't know if it's model specific or just a quirk in the release build of the code.
I'm starting to think this is an Android or Xoom bug.
On this forum thread u can see the whole discussion.
In my case I animate().translationX(value) the frameLayout that contains the webView but the webView fails to draw it's content in the new position.
Myself and some people from the forum ran it on an advent vega running VegaComb 3.2 all of them getting the same bug. On the other hand running on several emulators with different screen sizes and pixel densities or an Asus Transformer it behaves the way it should.