Scrollbar dissapearing in Android?

I'm using media queries to build the mobile version of this site: http://www.foodjing.com/

When I shrink my browser's window in my desktop computer the scr开发者_Python百科ollbar is displays perfectly (the one under the cursor):

But when the site is being displayed in an Android Phone that scrollbar disappears even if there are items overflowing the div.

Any suggestions to fix this?

Code:

Default CSS for the search results:

div#resultsListing {
    float:left;
    height:100%;
    margin:0;
    padding:0;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;

    ol {
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        li.place {
            display: none; // initially hidden, we will fade in
            list-style: none;

            &:hover, &.active-on-map { background-color: #F8F8F2; }

            span.dish-name { color:#228; }
            .highlight { background-color:#FEFECE; }
            .dish-name {
                font-size: 16px;
                font-weight: bold;
                font-family: Bitstream Charter, Georgia, Times Romans, serif;
                float: left;
                margin: 5px 5px 0 0;
            }
            .place-name {
                color: #CC5033;
                font-size: 14px;
                font-weight: bold;
                font-family: Bitstream Charter, Georgia, Times Romans, serif;
                float: left;
                margin: 8px 0 0;
            }
            &.place-only {
               .place-name {
                  float:none;
               }
               .dish-price,.dish-name,.dish-descriptio,.dish-notes {
                  display:none;
                  font-family: Bitstream Charter, Georgia, Times Romans, serif;
               }
            }

            span.dish-price {
               font-size: 12px;
               font-family: Bitstream Charter, Georgia, Times Romans, serif;
               color: #666;
               top: 25px;
               right: 0;
               position: absolute;
            }
            span.distance,
            span.address,
            span.phone,
            span.hours,
            span.dish-notes {
                float: left;
                padding: 0 10px 5px 0;
                font-size: 12px;
            }
            span.dish-description {
               color:#AAA;
               font-size:small;
            }
            span.address {
               color: #666;
            }
            span.distance {
               font-style: italic;
            }
            span.phone {
               color: #AAA;
               font-weight: bold;
            }
            span.hours {
               color: #999;
            }
            span.dish-notes {
               color: #999;
               font-size: 12px;
            }
        }
    }
}

CSS for mobile:

/* =Media
-------------------------------------------------------------- */
div#results { width:100%; }
div#resultsListing { width:auto; }
div#bigmap { width:100%; height:100%; }

@media screen and (max-width: 480px) {
    #header {
        padding: 0 0 0 12px;
        h1 {
            margin: 5px 10px 0 0;
            width: 18px;
            height: 27px;
            a {
                background: url(../images/logo-mobile.png) no-repeat scroll left top;
                float: left;
                width: 18px;
                height: 28px;
                text-indent: -9999px;
            }

        }

        div#header_search {
            border-right: 1px solid #E8E8E2;
            margin: 0;
            padding: 0 14px 0 0;
            width: 132px;
            input#searchbox {
                width: 122px;
                padding: 0 4px;
                margin: 5px 0 5px;
                font-size: 12px;
            }
            span#header_near_label {
                display: none;
            }
        }

        div#mobile-buttons {
            a.map-view {
                background: url(../images/map-view.png) no-repeat scroll left top;
                border-right: 1px solid #E8E8E2;
                float: left;
                width: 31px;
                height: 36px;
                text-indent: -9999px;
            }
            a.list-view {
                background: url(../images/list-view.png) no-repeat scroll left top;
                float: left;
                width: 31px;
                height: 36px;
                text-indent: -9999px;
            }
        }
    }

    div#results {
        width: 100%;
    }

    div#resultsListing {
        width: auto;
        margin-left: 10px;

        .dish-name {
            font-size: 14px !important;
            font-family: Bitstream Charter, Georgia, Times Romans, serif;
        }
        .place-name {
            font-size: 12px !important;
            font-family: Bitstream Charter, Georgia, Times Romans, serif;
            margin: 2px 0 0;
        }
        .dish-price {
            font-size: 12px !important;
            font-family: Bitstream Charter, Georgia, Times Romans, serif;
        }
    }
}

---

I'm assuming that your stylesheets are structured so that the mobile stylesheet inherits from the main rather than being completely separate. In that case, you have likely run into a bug in the Android browser, which treats overflow:auto and overflow:scroll as overflow:hidden.

I'm not aware of a workaround for this; you might want to reformat the page for mobile.

---

Turns out there is an issue with WebKit mobile where it doesn't support scrolling internal divs using overflow:scroll or overflow:auto. You have to implement your own scrolling on these platforms. Only whole page scrolling is supported natively.

There are some javascript libraries out there to help with this, such as:

• http://cubiq.org/iscroll
• https://github.com/davidaurelio/TouchScroll
• https://github.com/neave/touch-scroll

In my experience the performance of these solution is not as good as the native scrolling support because they are better able to animate smoothly. I'd suggest changing the layout so that you can use whole-page scrolling instead of overflow:scroll or overflow:auto.