Menu
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?
388
The absolute position exiles the element from natural flow. What you need to do is ie. set the margin-left to 50% of parent's width and then slide it left -50% of its own width. This won't work with relative value of element width. You must declare it absolute (like above, 200px).
Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.
There is nothing wrong with using position: absolute in the above example, but why not use an easier solution? Let's explore that. The first step is to add display: grid to the card component. We don't need to set any columns or rows.
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
