A few points to get started;
Handset: Nexus 4 (Android 4.4.4)
Browser: Chrome 36.0 (the latest update)
I am struggling to find a single article online which relates to it! Is there anybody else experiencing the same issue?
The issue; pretty much any swipe enabled horizontal slider prevents vertical scrolling. It happens on just about every website that I have tried so far.
Take, for example, the JD Sports website;
http://m.jdsports.co.uk/products/nike-air-huarache/120445
This is one of the biggest sport retailers in the UK. When I view a product page, the swipe gallery fills my entire viewport making it very difficult to scroll down to the buy button, which is hidden below the fold.
If I take a look at my favourite slider site, I can't vertically scroll when touching over a gallery;
http://kenwheeler.github.io/slick/
Is this a bug? Or do I have something wrong with my handset/browser?
Related
I've received a bug report from a user that's quite confusing. The user reports that two lists in the app are broken. Firstly, the lists appear out of place with both a vertical and horizontal offset, with the vertical offset being greater (see picture) and secondly, when they tap on an item in the list, it opens a different item to the one they clicked. Drag-to-reorder also captures a list item further down than where they pressed. As the lists are appearing lower down than they should, my theory is that some sort of graphical glitch is showing the list out of place, but still registering and acting upon touch events as though the list were in the correct place -- resulting in the 'wrong item' part of the problem. However I'm at a loss as to what could cause a bug like this -- it's more than a layout issue because the system seems to be confused about where the list is as well! Photo below (note that cirular blob in bottom corner is just a Facebook Messenger chat head)
The bug appears on a Sony F3311 and Blu Diamond M, both running Android 6.0 / API 23, but not a Nexus 7 running Android 6.0.1. We've not encountered it on any other emulators or devices, right up to a Pixel 4a.
Update: the issue seems to be caused by using a fading edge on the lists (a ListView in one case, a RecyclerView in the other.) Removing this fixes this, but I can't work out why exactly it's happening, or even what devices attributes cause it.
I'm having an issue with an AppMobi app: HTML5 and CSS on a WebKit browser concerning horizontally scrollable jQuery UI Tabs.
You can see an example here:
http://keith-wood.name/uiTabs.html#tabs-one-line
If you view that on your Android phone (at least when I do it with my Galaxy S3) you can see them, they scroll back and forth just fine, but none of the tabs are clickable. I'm having exactly the same issue in my app so it's a fine example.
The problem doesn't occur on my iPhone 5, and it's not a problem on Android if the screen is large enough that they don't need to scroll.
Anyone know of a way to achieve clickable tabs in this situation? I've added position: relative; on the containing elements, and it works better now, but if it is scrolled all the way to the right, it still doesn't work, but will now work if it's anywhere except all the way to the right. Weird.
Thanks!
In Netflix's Android app, there is a WebView that covers almost the entire app's area. When you drag a row left to right, it will scroll only that row, and do so using nice inertial scrolling. If you drag up and down, it will scroll the whole page up and down.
I've managed to duplicate this functionality on iOS (in a uiWebView as well as in Safari proper), but not on Android. On Android devices, anything I do is either painfully slow to scroll, or you have to be very careful scrolling vertically to start by touching in the background area between rows. Neither of which are acceptable. Obviously, I don't want to do the scrolling animation in javascript, as that will be too slow.
I know Netflix does it using a WebView, so....what is the trick they are using?
I have tried using the css properties (for the row div):
overflow-y: hidden;
-webkit-overflow-scrolling-x: touch
to no avail.
If you can't get the css Android compatible for your particular WebView, why not create server-side functionality that outputs only requested rows into seperate WebViews?
I would do the following:
* Query the web server to determine how many rows there are.
* Programmatically add the amount of rows that the web server says it has. For example, if the server reports that there are 5 rows, create 5 WebViews, each with their own URL params (ex: the first WebView would query mydomain.com/wv?row=1).
* Put each WebView row in a HorizontalScrollView, and put all HorizontalScrollViews in a VerticalScrollView.
* On URL change, go to a full-page WebView that displays the details of the clicked tile.
* On back pressed, close full page WebView and reload rows.
Not the cleanest of solutions, but should work fine.
Try to use iScroll in your HTML.
In the link you can find the source code, examples and javascript libs.
Also it has some useful callbacks.
I use it a lot when I'm working with WebViews.
Netflix could have used custom gesture detection and have seen if the scroll was more horizontal then vertical or more vertical than horizontal, and then based on how far the scroll was, scrolled the webview horizontally or vertically
So I'm testing out a site on my Nexus 4, the layout when you browse to the page on mobile looks like so:
It turns out on my phone, I can scroll or move the scroll bar down, by tapping the very edge of a screen. When I try to tap the right arrow, sometimes it will think that this is an attempt to scroll and move me down the page.
My question is, is this limited to the Nexus 4 device, Android or is it the Chrome Browser? I've tried it on both a HTC and even the Nexus 10 and it isn't possible so it seems to be localised to the Nexus 4 device. More importantly, is it possible to disable this?
Although the scrollbar is not always visible in Chrome for Android, it is always present (when the page extends past the end of the screen) and will intercept touches on the edge of the screen.
As you scroll vertically on the Nexus, look for a gray bar on the right side. It is hidden when you are not scrolling, but it is still there and will still receive touches. The color of the scroll bar can also make it hard to see on certain backgrounds (such as the gray I see in your screenshot).
When I'm not touching the screen:
When I'm scrolling:
Has anyone been able to create of find an open source way to implement a horizontally scrolling Grid view? For phones a vertical scroll makes sense as apps are usually used in portrait mode, but on tablets when in landscape a left to right scroll seems much more usable then a top to bottom scroll.
I ended up going with a page swipe motion to swipe left and right one page at a time as demoed by Google in the Google IO 2011 app