Can you make the overflow content of a div scrollable in the Android browser?
It is scrollable in all other modern browsers.
In iOS it is scrollable - however it does not show scrollbars - but it is scrollable via dragging.
A simple example:
http://jsfiddle.net/KPuW5/1/embedded/result/
Will this be fixed soon?
Android 3.0 and higher have support for overflow:scroll, on < 3.0 it's another story. You might have some success with polyfills like iScroll, however that does come at a cost. It's difficult to implement on sites with complex layouts, and you need to a call a method everytime the content on your site changes. Memory use is also an issue: on already underpowered devices performance may lag because of these kinds of polyfills.
I would recommend a different approach: use Modernizr to detect support for overflow scrolling , add a class to your html tag and use that to rewrite your CSS so that pages scroll 'normally' instead of in a box.
/* For browsers that support overflow scrolling */
#div {
height: 400px;
overflow: auto;
}
/* And for browsers that don't */
html.no-overflowscrolling #div {
height: auto;
}
overflow: scroll; is supported as of Android 3 (API 11).
For a cross-platform (namely iOS <=4.3.2) Cubiq iScroll is an easy-to-implement fix.
You could try touchscoll.js for scrollable div elements
Just for completeness:
The scrollbars are actually there in Android 2.3, but they are very buggy and by default they are styled to have 0 width, so they are invisible.
You can make them visible by adding styling like:
::-webkit-scrollbar {
width: 30px;
}
::-webkit-scrollbar-track {
background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
background-color: $lightgrey;
}
However, the thumb element is not draggable, you can only move it by tapping the track underneath or above it.
Also, these styles will change the look of your scrollbars in all webkit browsers, so best you should add a class that only applies to Android 2.3.
You can make a DIV scrollable in Android by defining the styles of the scrollbar in your CSS.
This article show you how to do it:
http://css-tricks.com/custom-scrollbars-in-webkit/
Related
I have a fixed footer with bottom: 0. It works fine except on android it is appearing below the screen. I have some other fixed elements that are also appearing off screen. For some reason I cant container them within the screen I've searched around and tried a view things but no joy. My guess is that if I change something in the viewport it will fix it. The image was taken from google chrome emulating the site on an S4 but the same problem persists on my actual phone also. The code for the footer should just make it sit at the bottom and it works fine in other browsers. I can change the value of bottom to around 26px then the whole footer becomes visible on the screen but that is not the fix I want. Any ideas?
.footer-fixed{
position: fixed;
bottom: 0;
z-index: 99;
width:100%;
background-color: #111;
height: 50px;
}
i've had this issue before,
but only on android versions lower then 4.4, so maybe you could tell me what android version you are working on,
try adding:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"/>
to your
<head></head>
on Android < 2.3 devices for elements that are fixed behave as "STATIC", (thats why your top element could be functioning normally, because its the first element and pushes the rest down)
Android 2.3 supports it but u need to disable viewport scaling as i think once written by bradfrost cant exactly remember, it was a while ago
if you experience flickering of the elment try adding
-webkit-backface-visibility: hidden;
to your css class, or even extend it with
-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.
-webkit-perspective: 1000;
its solves the flickering, but the thing is on some android versions you only need to add the backface-visibility hidden and on some the other 2 rules (trial and error). i should go for the first one, (at first) because adding the translate 3d, will drain more battery
anyways if its just a website try the solution above,
if you are making a cordova app, try adding https://crosswalk-project.org/ which add their own webview to your cordova package solving all these browser quirks on android.
--
a sidenote
when a element has position fixed, its display will be set to block,
and you have width: 100% on your elment, so if you are not using box-sizing:border-box;
the element would have a width of 100% + padding + margin added to it,
i don't know the rest of your css, maybe you are setting margin or padding by a container class which is
(check the metrics of your element with chrome inspector)
If this is the case you could do 2 things
change display
width: 100% to auto;
or add: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: -webkit-box-sizing: border-box;
or add normalize: https://necolas.github.io/normalize.css/ to your project, above your own css (link tag) within the head (Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.)
I am completely at a loss here, and because I don't have an Android device, it's been very hard to figure out what's going on, and can't duplicate it in the simulator. For reasons unknown, Chrome on Android is having issues focusing form fields, and users are starting to complain. Everything works fine on other platforms - including Chrome on Windows/Mac/iOS.
The site having the problems is no longer broken, as the problem was resolved.
Any guidance would be hugely appreciated.
I did some testing locally and confirmed that my comment is correct. If you set the vimeo iframe to display: none; that will allow the form elements to be tapped on android / chrome. So you'll need to make three changes:
css update: set vimeo iframe to display: none
javascript update - where you normally set vimeo's iframe to visibility:visible, you'll also have to set display:block
javascript update - similar to above, where you set vimeo's iframe to visibility:hidden, you'll also have to set display: none
I believe that will solve the problem and have no negative side effects.
Vimeo iframe is taking the focus, hence the input fields are not clickable.
Set the width and padding-top to the modal containing Vimeo iframe only when the modal is selected.
Change following css selector :
.modal .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
to
.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
That website is very laggy on my device, perhaps you should reconsider the design. Or make it simpler for tablets/phones.
Nevertheless I found that text fields that follow (including) "What are your three favourite movies?" can be focused properly, and it seems there's some view on top of the first text fields in this form.
Perhaps that can lead you in the right direction. Good luck!
Although my site isn't the best, it's a mash of HTML and isn't even responsive, it works as expected in every browser except for the Android Browser. I have a secreenshot below of the select box in the android browser, and then in every other browser. I'm really not sure how to approach this as I generally work things out in the end with trial and error, and like I said my code really isn't that good!
Any help would really be appreciated :) thanks very much.
Android (using www.modern.ie to test):
Other browsers:
The CSS for the select box:
#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;
Form elements are among the most unreliable parts of HTML/CSS regarding cross-browser rendering consistency. Especially some properties of the box model (height in conclusion with border or padding) are troublesome.
Citing from that article:
Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.
A great CSS collection to start with is normalize.css. You should think about using (parts of) it, to get as much rendering consistency as possible.
You are already using em as unit for border-radius, for scalability in older browsers, especially IE 6-8, you could go for ems for all length units.
I've forked your fiddle, to include those ideas. See http://jsfiddle.net/Volker_E/4v3sm71g/
By the way, Chrome v36.0.x on Android 4.4 doesn't show a difference at all per default.
#form .input-select {
? float:right; ?
clear:right;
}
#form label {
? float:left; ?
clear:left;
}
I'm creating webview application in android using jquery mobile framework.
I need to show table that has width more than screen.
The horizontal scrollbar is not showing.
I have tried many ways but none worked for me.. (a lot of people facing the same problem with me, i have tried all of google search result link in page 1 to 3, some link from stackoverflow too)
Any suggestion?
*sorry for my bad english..
I had a very similar problem, and I found a workaround (bug-fix?) for my situation via some experimentation.
In the JQuery Mobile CSS file ("jquery.mobile-1.1.0-rc.2.css" for me), I changed line 1119 from:
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
to:
.ui-content { border-width: 0; overflow: visible; overflow-x: scroll; padding: 15px; }
This allowed my CSS (with absolute widths and coordinates) to be scrollable horizontally.
Once you modify your local copy of the JQuery Mobile CSS, don't forget to change the link in your html header.
Again, I'm not sure if the previous behavior was intentional or not. It may very well be inline with the design goals of the Jquery Mobile team. But this change worked for me. Hope it helps.
I suspect this is a bug that I found in this forum.
http://forum.jquery.com/topic/horizontal-scroll-views
But here they talk about some other alternative for this called swipe by which you can achive this
There are already some talk about this in site itself and you can refer it.
Swipe among activities in android
I am developing a mobile web based page that uses CSS transitions and 3D transformations. I have ran into a bug with Android 3.1 Webkit and I can't seem to find a solution to it.
I use CSS rotations so that I basically have an element with the parameter backface-visibility: hidden; and then I add a class to this element to start the transformation.
#flipper {
-webkit-transform-origin: center center;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-webkit-backface-visibility: hidden;
}
.rotating-cover-effect {
-webkit-transform: rotateY(180deg);
}
The problem is that on Android (specifically 3.1) the backface of the #flipper is still visible after the rotation. On iOS or with desktop Webkit browsers (i.e Chrome, Safari) the background is hidden correctly.
Is this a bug in Android Webkit or am I doing something wrong?
Are you making an Android app? If so, you need to enable hardware acceleration by adding this to your AndroidManifest.xml:
<application android:hardwareAccelerated="true" ...>
If you're making an actual website, http://thewebrocks.com/demos/3D-css-tester/ can help you conclude whether it's a problem with what you're doing or with the browser implementation.