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?
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.
I don't know why it worked, but adding -webkit-backface-visibility: hidden; to your style will fix it
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.
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
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>
Related
My problem is described in the following.
I recently developed a Phonegap app (Android and Ios are the target platforms) and deployed it on the markets. My app mainly consists in an event list.
The list is obviously scrollable. The purpose is to give a native feeling experience to the users or at least something close to it. Actually, I would like to enable inertia for most users (everyone would be awesome!).
The app can’t be downloaded by android < 3.0 phones, so it doesn’t matter if the solution excludes android 2.X users. In addition, for the moment the app is not design for tablets so I don’t mind if the solution doesn’t works with android < 4.0.
I use the following CSS property on the scrollable div:
overflow: scroll;
-webkit-overflow-scrolling: touch;
On Ios, there is absolutely no problem. It is fast and inertial scrolling is enabled.
With Android, I'm still having problems with some phones. Here are my tests:
Nexus 5 (Android 4.4) : inertia Ok
Sony Ericsson (Android 4.0.4) : inertia Ok
Samsung galaxy Trend (android 4.0.4) : inertia Ok
Samsung Galaxy Note 3 - SM-N9005 (Android 4.3): No inertia
Samsung Galaxy S4 (Android 4.3): No inertia
I don’t’ use any JavaScript library for scrolling (for example Iscroll ect…) and I don't want to do so except if it is a really lightweight librairy. In fact, I have tried Iscroll and the result is unusable because it is too slow and jerky. By the way, the event list contains gradient, images, text, shadow ect…
I have done a lot of research on the internet. And now, I feel lost!
I even don’t know if the problem is related to:
The manufacturer layer
The Android version
The default browser on the phone (I think not because it appears
that Phonegap doesn’t use it)
The embedded PhoneGap webKit rendering engine
Deprecated CSS properties : see this article
Something else?
It is a bit weird because it works on 4.0.4 and 4.4 but not on 4.3… I start to think this is related to manufacturer…
Any help, solution or information about the above would be really appreciated.
Not sure if you have solved your problem yet, but I just came across this issue.
I was using Hammer.js to detect drags for the sidebar, within doing so, I called preventDefault() which affected scrolling inertia in the android default browser, but not chrome. Removing that call fixed the issue.
I had the same problem. I looked into it for quite some time and the only solution I know is using a scrolling library. The best one I found is Overthrow: http://filamentgroup.github.io/Overthrow/
Cool thing is that it uses native scrolling whenever it can and only reverts to javascript when needed. Even works for me on old Adroid devices, while keeping that native scrolling feeling on iOS.
My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
I've just launched a new version of our site and I'm trying to iron out a few issues which I wasn't able to test before because I can't emulate an android phone on my localhost (I'm sure it's possible - time didn't allow the required reading)
Anyway, I tested on ie7-9, ff, opera, safari, chrome, everything you can think of an mostly everything is just fine apart from:
on android phone: I have a horizontal navigation bar between the header and the content, the last item on the menu has shifted to the next line. This could be just a pixel, but why! why! why! boohoo :(
Then on IE7, on any page which has lots of products (like this one: http://www.traditionalirishgifts.com/guinness-merchandise) the filter options and the paging navigation are meant to be on one line, like they are on every other browser.
any css genius's out there fancy helping me out?
It depends on the screen resolution of the phone. If you tried it
on a phone with a wider screen in pixels, you would have no problem.
I see one IE7 problem:
div#dropMenu no specified padding
IE7 has a default padding unlike any modern browser.
Add padding: 0 and you will have no problems.
Maybe there's some magic I don't know about with scrolling on Android?
I've got a website that works fine in IE7, IE8, IE9, FireFox, Chrome, AND Safari on desktop. It also works fine in Safari on iPhone.
However, one of my Android 2.3.7 friends informs me that he has Opera and the default browser on his Android. In both of those browsers, the scrollable view doesn't end at the bottom of the page. When you get to the very end where the dark grey footer ends, you can go right past it and see solid cream-colored background going on for miles of scrolling!!
I have NO IDEA what could cause this!
Can anyone throw me a bone here?
Here's the site for anyone who might have Android 2.3.7 or another version of Android to test. Like I said, happens in both default AND opera browsers.
http://wwwa1nbkclientsitecom.zippysites.com/
UPDATE: I removed the overflow-y property from the HTML style tag in the stylesheet. I had another Android 2.* user test it. Its still broken. And now my next guess is that this might be broken due to the fancy floating menu at the top. Early versions of Android only had partial support for position: fixed
I'll try disabling the position: fixed menu and get it tested again.
UPDATE 2: I got it tested. Its still broken. I'm presently installing Google's Android SDK for the Emulator functionality. It'll let me specify old versions of Android to test. If I narrow down the problem, I'll post the answer here. Until then, if anyone has an idea of what's going on, please post your idea!
It works fine for me in the latest version of Chrome on an Android 4.0.4 tablet.
However, I think the problem may lie with the other browsers' interpretation of overflow-y: scroll; on your <html> tag.
Try removing that property. You shouldn't need it on the <html> tag anyway.
It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.
I am developing a mobile version of my website which I am testing on my Samsung Galaxy S android mobile device running Froyo (2.2).
I would like to , when viewed with the standard internet browser, have a fixed header and a fixed footer ( which are always visible on screen) with the contents of the pages scrollable in between.
I tried all sorts of combinations with padding of body and the sorts (which seem to work when viewed on a browser on the pc), but can't seem to find a solution.
Can anybody help here ?
Note: if I try something like this :
<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>
Both the header and footer are fixed but the content is not scrollable , e.g. it also appears fixed .
It might be the browser of the Android Froyo 2.2 of course.
Anyone ?
It seems that position:fixed is only partially supported in Android 2.2+, if you also add a particular meta tag. You should also note it's not supported at all under iOS. There are scripts to emulate the behavior, though(which I don't have right at hand.)
The following site explains the state of this issue.
http://bradfrostweb.com/blog/mobile/fixed-position/
The author suggests a few JavaScript solutions.
iScroll 4
Scrollability
Sencha Touch
Jquery Mobile
Since you probably only want to build this a single time and would like to support multiple mobile devices transparently, I would suggest you take a look at : JQuery Mobile
Article on page layout
If you are already working with minimal screen space, why would you want a fixed header and footer? Consider that every browser window may not be big enough for it to be practical. What happens when someone views your page in landscape and you have both a fixed header and footer?
Even on the Nexus S, at 800x480, at 100% zoom you will take up half the page in headers and footers and that's in portrait. In landscape, forget about it...
Is there another design that could work well?
What is the use for the links? If they are very important it might make sense to just repeat them another way.