CODEWITHSUNDEEP
androidcsscordova
user2630115
user2630115

Reputation: 179

CSS overflow and absolute positioning issue on Android Browser

We have a mobile web app built using JQuery Mobile, PhoneGap and ASP.net MVC. The app is targeted to run on iOS and Android devices regardless of the browsers. We have tested the app on devices listed below and it seems to work fine without any issues

iOS 5 - iPad , iPhone .

Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.

Android 4.0.3 - Asus Transformer Tab

But when tested on Android Stock browser of Samsung Galaxy Note 800 with 4.1.2, we encountered a very strange issue. The elements placed in a div (say child div) with css attribute'overflow:auto' do not respond to any touch events while scroll is enabled. The main thing to note here is that the Parent div containing this div is absolutely positioned 'position:abolute'. After researching over the internet for sometime we found that the combination of absolute position and overflow attributes may cause some issues on Android browser.

Removing absolute position is not possible at the moment as it is resulting in complete redesign of the layouts and we are left with only few days for the release. So can any one suggest a quick fix for this?

Upvotes: 18

Views: 11891

Answers (5)

user3725652
user3725652

Reputation: 1

How about trying to put the elements inside the absolutely positioned container in a new div and position it relatively?

<div class="absolutelyPositionedParent">
    <div class="relativelyPositionedElement"></div>
</div>

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>

Upvotes: 0

Moob
Moob

Reputation: 16184

Use overflow-x and/or overflow-y properties instead.

EG 

overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */

Also, since scrollbars are hidden on touch devices you can use :scroll rather than :auto. It will look the same but may not be subject to the same bugs.

Upvotes: 3

smyk
smyk

Reputation: 371

Problem with overflow: auto is/was a known issue in Android browser. There was an issue reported on that in 2009 (see here). I thought they had solved it in the meantime. It's marked obsolete. But people are still complaining it does not work. If it is so, I suspect they will not fix it anymore, as Chrome has become a standard Android browser now.

Upvotes: 1

mistersender
mistersender

Reputation: 256

I don't know why it worked, but adding -webkit-backface-visibility: hidden; to your style will fix it

Upvotes: 1

josemmo
josemmo

Reputation: 7073

You can use the javascript library called "iScroll". It works with most of Android devices and is not difficult to implement. Just write var scrollDiv = new iScroll('divId'); below the div element. Here it is the project page: http://cubiq.org/iscroll-4

Upvotes: 0

Related Questions