My phonegap build app is working fine on all versions of android from 4.0.4 to 4.3.
When I tested it on KitKat 4.4 some pages where content doesn't cover the screen height has got scrollbars shown. On pages where content needs to be scrolled scrollbars hidden.
I don't know what the problem is and how to solve it.
Does anyone have an idea how to fix it? Or is there a css code (not overflow: ...;) or jQuery script how to prevent it or make a virtual object with a couple of pixels more than the height of the screen.
![Screenshot][1] [1]: http://i.stack.imgur.com/bUaBS.png
From here: 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.
It means that Android 4.4 (KitKat) now uses Chrome for WebView-based apps. On Chrome, when using the css property "overflow: scroll", the browser displays the scrollbar (even if content is smaller than the parent view).
Changing "overflow: scroll" to "overflow: auto" fixed the issue for me.
You can use this:
SELECTOR::-webkit-scrollbar {
display: none;
}
Related
I updated to the newest version of Chrome for Android on my Nexus 7 tablet and ...
-webkit-overflow-scrolling: touch
... no longer works. In addition, the following evaluates to false:
!!('WebkitOverflowScrolling' in document.documentElement.style)
Was support for overflow scrolling removed from more recent builds of Chrome for Android? Is there an equivalent or comparable alternative momentum scrolling mechanism (not iScroll, etc.) that I can use found in the newest version?
As well, I searched for Chrome Beta in the Play Store on my device and it does not come up in the search results. Maybe the beta version is not offered for Nexus 7 tablets?
Any help on this matter is much appreciated. It's very frustrating that Google appears to have removed this feature from their browser ....
edit:
Detailed version information:
Nexus 7 tablet running Android version 4.2.2
-webkit-overflow-scrolling: touch;
and
!!('WebkitOverflowScrolling' in document.documentElement.style)
Works and evaluates to true on Chrome version 18.0.1025469
Does not work and evaluates to false on Chrome version 26.0.1410.58
Try adding z-index: 0 to the element with overflow: scroll to create a stacking-context that provides a hint to Chrome to use the fast-scrolling code path.
Background:
I am currently experiencing this issue after updating to the latest version of Chrome for Android. This was also compounded for me by the fact that due to this change the current Modernizr test for this feature now returns false, so my CSS styles were not being applied.
Digging around I found another issue that discusses the support for overflow scrolling touch:
Tien-Ren observed while debugging 162363 that -webkit-overflow-touch
is an inherited property. So the behavior of setting z-index: 0 on all
non-hidden elements with that property creates a cascade of stacking
contexts below it. (This behavior, behind
ENABLE_ACCELERATED_OVERFLOW_SCROLLING, is currently enabled only on
Android.) The obvious fix would be to set z-index: 0 on only
"overflow: scroll" elements.
So it would seem that if you are having issues with the scrolling not working as expected then adding z-index: 0 to the element with overflow: scroll then this may help. However this did not work for me, although the scrolling sections worked (after I had modified the Modernizr css-overflow-scrolling test to return true for this version of Chrome) the momentum effect of the scrolling was not present.
From this URL = https://code.google.com/p/chromium/issues/detail?id=175670&q=overflow-scrolling&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
'
No, I think this was indeed triggered by 172481. We removed -webkit-overflow-scrolling with the hopes that it was no longer necessary because we'd automatically opt-in to fast scrolling when we need. The problem is that it isn't happening here.
Those SP changes you mentioned probably won't affect this issue because they won't show up on a non-corp account, right? I think everything works fine with corp but I'll check.
'
A dirty solution that worked for me (required Hammer js):
Hammer($('body')[0]).on("dragup", function(ev) {
window.scrollBy(0,ev.gesture.distance);
});
Hammer($('body')[0]).on("dragdown", function(ev) {
window.scrollBy(0,-ev.gesture.distance);
});
we had scroll problems with on Chrome 40.0... on Android (tablet & mobile) and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px)
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}
I created a mobile website which has a content slider with overlay text and bulleted navigation + a fixed ad banner at bottom of the page. Overlay text and navigation buttons arr placed inside separate div elements and div elements css position is set as absolute. And the fixed ad banner at the page bottom is placed in another div its css position is set as fixed.
On Android 4.0.3 Default Browser I experiences a strange issue which is not there in any other browser or mobile platforms. Am using samsung Galaxy SII to test this.
Issue:
Whenever the fixed banner appears all the above absolutely positioned div elements are not visible. Why this happens?
Take a look on this issue: http://code.google.com/p/android/issues/detail?id=31862
I had many problems with the stock browser too.
i have experienced many times that error. There is no such error in FF and Chrome for android, but in default android browser in portratir mode, when footer is sticked to bottom part, and page content height is less than 100%. It shows white line under footer, it seems it's not any padding or margin of Body and HTML, it seems it's something other.
I can use developer tools on desctop to debug Chrome in android, but i don't know how to debug default andoird browser.
I have removed screenshot and link. Because there is no problem anymore.
Problem dissapeared after i have decreased min-width to be 980 from 1000px.
It seems min-height worked wrong in android and iphone default browsers because of wide width. For example you can took this examples of sticky footer, change min-width of body to be 1000-1040px and you will see empty space under footer.
Sticky footer example http://ryanfait.com/sticky-footer/
I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..
The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Default zoom - it makes difference, but it does not fix the issue
Auto-fit pages - in my case makes no difference
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(
I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.
I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using #media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has margin: 0 auto;, min-width:320px;, max-width:900px;, and width:100%;.
I am developing mobile apps using HTML5 & CSS3 using PhoneGap. My problem is that whenever I touch a textbox on my webpage running on the Samsung Galaxy Tab 10.1 (Android v3.1), it shows the keyboard but the page goes black for a fraction of second. At times, it flickers for a while showing black background and then restores itself.
I even tried with a simple page with a single input type="text" and it even happens with the same.
Anybody faced a similar issue and have had a fix for it?
Any help is much appreciated.
Thanks.
UPDATE 1:
As I said above, the black flickering even happens with the app containing a simple page with a single text box. Following is the code:
<!DOCTYPE html>
<html>
<head>
<title> Flickering Problem </title>
<style>
html, body{
-webkit-backface-visibility: hidden;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<input type="text" width="200px" height="100px" />
</body>
</html>
I tested this on my Android tablet, and the flickering was as with a full fledged web page.
I tried adding certain CSS attributes suggested here on SO for similar problem which claimed to solve, but did actually help.
It is worth noting that the black flickering is happening whenever we try to enter any text in the textbox, and I am currently not doing any animation(s) / transitions using CSS3.
The solution is to enable hardware-acceleration in the android manifest.
<application android:hardwareAccelerated="true" ... />
This enables double-buffering through the GPU and resolves the problem.
Note that this option is only available in Android 3.0+.
Here's the background for all you techies: :)
We have recently been testing a functional jQuery Mobile HTML5 app wrapped with PhoneGap Android 2.x phones to the Galaxy tab 10.1.
We have seen something very similar, with the exception that we have defined a splash screen for our app.
What we see is that when an input field is given focus, the screen flashes up the splash screen momentarily. Very annoying! To verify if this is the same problem, define a splash screen for your PhoneGap app and see if the screen flahes your image instead of a black background.
Knowing something about what's going on with PhoneGap and the Android WebView, this is my best estimation of what is happening:
PhoneGap loads the main App activity with a black background and displays the splash screen (if defined) in that initial window.
PhoneGap then starts the WebView and opens it on top of the main Window.
When a field is selected, the Android invalidates the component wach time it updates it based on a focus event or keypress, or whatever, and Android redraws everything. So it redraws the main window behind the WebView and then redraws the WebView with the HTML page content on top of it. Since the device is not properly double-buffered, you see all of this redrawing in all its ugly glory right in front of your eyes.
We have seen serious glitches with Android web forms on some Android 2.x phones we have tested, and this looks like yet another glitch, but this time on the Galaxy Tab running Honeycomb (3.0).
We have attempted to use CSS -webkit-backface-visibility to resolve issues on some phones when experiencing flicker in the past - but this has caused serious rendering issues in HTML forms. Be warned! In theory this should be a viable fix to introduce some double-buffering into the mix, but in our experience it causes more problems than it solves.
This is either a problem with the Android OS or Phonegap.
If it's a problem with Android, this can only be fixed with a software update to the OS. You can test this out by going to a regular website with a text box and tapping on it to enter text. If it flickers, it's probably the OS.
If it's a problem with Phonegap, it might be fixed by doing a specific search for that. Looking at the top results in google, I've found this:
http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html
This suggests you put -webkit-backface-visibility: hidden; into your code. While I see you put it into the html, body tag, try putting it into the * tag, ex:
*{
-webkit-backface-visibility: hidden;
}
Note: The link puts the style onto a .x-panel tag, I'm not sure if that's specific to their code or to Android.
Here's another link that you should look into for a fix: http://code.google.com/p/jqtouch/issues/detail?id=301
I added a demo page:
http://jsbin.com/upixel/
From your code, the input is big (width and height need to be set by css) - if that is the case, the black color may come from the default tap color and the flickering may come from blocking (phonegap or script's fault)
see will this solve your flickering:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Live Demo
Hope it can help
I have had the same problem and at the beginning I thought it had to do with the manifest part of the app.
After hours of troublesolving this is what worked for me. (Still haven't had the problem after an hour of testing on the phone. A samsung galaxy s2, version 4.0.3. And for the app I'm using verison 2.1).
html{background:url(img/brownBG.PNG) repeat 0 0;}
I just put a background on the html and now it works fine. If you try this solution, please comment if it works for you or not.
EDIT: I also have this css rule which is important for it to work
*{-webkit-backface-visibility: hidden;}
If anyone is still looking for a solution to this, I found the support ticket for this bug:
http://bugs.dojotoolkit.org/ticket/15365
As of today, the best workaround consists in using the adjustPan Android option plus the above subclass of ScrollableView? (if you can afford creating an APK dedicated for Android >= 3, you can also add the hardwareAccelerated option). This solves all troubles except the field duplication on Android 4. Of course, if the ScrollableView? is not really mandatory in the view containing text fields, replacing it by a View is even better.
In conjunction to the solutions mentioned already (i.e. -webkit-backface-visibility: hidden; and android:hardwareAccelerated="true"), I have also tried either one of the following:
(Applicable only on Android version >= 3)
AndroidManifest.xml
android:windowSoftInputMode="adjustPan"
MyActivity.java
this.runOnUiThread(new Runnable() {
public void run() {
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
}
});
I have a proven solution for this problem, I was also facing same problem but I solved it myself.
First create a field inside body and make it hidden or you can make it hide behind a div using z-index so that it won't be visible.
<script>
$(document).ready(function() {
document.getElementById('example').value='';
});
</script>
<body>
<div style='z-index:50;position:absolute;height:100%;width:100%;'>
Your page matter here</div>
<select id='example' style='z-index:10'>
<option value=''>a</option>
</select></pre>
</body>
The moto is that we have to set this select field when the page load, and doing this will stop the flickering for sure...try it guys.....it worked for me
I had a same problem on Samsung Galaxy Tab 10.1 like yours.While I upgraded android version from 3.1 to 4.0.3(using Cyanogenmod 9.0 nightly build 20120302) and without any code change, the problem was solved on my device.
So I guess that it's an issue of webview component on Galaxy Tab android version.
I can't say this will fix your problem, but it is worth a shot. Check your AndroidManifest.xml file for android:configChanges="orientation|keyboardHidden" in the activity tag (under application).