Link to the Page that does not work
Hello Community,
On this page scrolling with safari on an Iphone 5 just works a charm. But on my HTC with Chrome 31.0.1700.99 and Android 4.1.1 I can only scroll if I touch the screen with two fingers. The scrolling than is still very slowly. I tried to analyse the problem using adb and remote debugging but I am really new to everything mobile.
It seems as if there would be no touchstart and touchend event but I dunno if it is not fired or if I need to handle those events manually and they ain't handled.
Just telling me this would be a big help. Thanks a lot for your efforts.
Related
I have the same website for mobile and desktop devices. One weird behavior I discovered is on mobile devices - Android and Chrome browser.
I didnt have the opportunity to discover exact trigger of the behavior but I think it has something to do with screen turning off.
I have this code before unload. On desktop it works fine.
$(document).on('beforeunload',function(){
$('.loading').show();
})
On phone it works also good but when I minimize Chrome or screen turns off and I wake up the phone. It triggers beforeunload event. Because of that I need to reload the page. I tried also small workaround that clicking on the .loading class will hide it, but with this behavior it doesnt work.
Any ideas ?
Question
What am I missing in my CSS to make the results more consistent for no touch actions in my Cordova app?
I am building an app with Cordova (testing on Android). We had a full page selection come up that's not supposed to scroll so I used touch-action: none in the CSS. But it still scrolls but only sometimes.
CSS
body {
touch-action: none;
}
Now I'm showing different "pages" by turning on/off different divs in the html. And what has me super confused is that when it goes to the first page it will scroll.... once! And only once. So I can tap the screen and drag the page up/down, let go and I can't scroll again.
BUT.
I go to the second page and it will do the same thing. It will let me scroll once, but any further touch events get ignored.
The issue with this is my fancy html selector is suffering from this. Where it will work, but periodically allow the page to scroll when it shouldn't.
My understanding is that "touch-action: none" should kill all touch events on Android not just some of them.
After more digging I was able to solve this.
Quick answer. touch-action: none; is perfectly fine.
What wasn't fine was that I was using Chrome's remote developer tools to connect to the device and watch the console. To see what was going on with the app at run time. Because you can touch the application through the developer tools I'm guessing it was managing to screw up touch events. As in ignoring touch-action:none and forcing touch actions to happen. Even if you touched only the real device and not the device "sim" through the developer tools it was still screwing up touch events.
So the solution. You can use the developer tools to make sure you've added the css correctly. Then close the developer tools for the device and run it again in cordova using cordova run android and don't connect using the developer tools.
I spent two working days trying to solve this. :(
I hope someone has some useful insights for me on this issue:
We are developing a hybrid application for mobile platforms (currently android using cordova). The application is fullscreen (MATCH_PARENT) and all the movement should be handled in the web code. This works fine by using preventDefault() on touch events for the most part. For the last few days however we've been troubleshooting a bug where the webview scrolls instead of it's contents (default touch behaviour, the app scrolls instead of the web code).
We went through a lot of stack overflow solutions to no avail:
document.addEventListener("touchmove", preventBehavior, false); - prevents me using from using overflow: scroll; - work around?, Android - undesired WebView movement on drag gesture, Disable scrolling in webview?, How to fix"Miss a drag as we are waiting for WebCore's response for touch down" & How to disable horizontal scrolling in Android webview to name a few.
Finally we found this:
https://code.google.com/p/chromium/issues/detail?id=260732 which explains that touch events handled in the web code that take longer than 200ms to execute will be canceled and sent to UIThread for handling.
This is of course intended behaviour and is currently worked on. As mentioned in the thread chromium 35 will have support for the touch-action:none css property (http://www.w3.org/TR/pointerevents/#the-touch-action-css-property).
Finally for the problem and the actual question:
We want to handle all touch events in web code (JavaScript) and the application is designed for it. Is there a way to prevent android and cordova from canceling the webkit/chromium event handling and calling default behaviour. Plus points for a general solution since we want to support Android >4.0 (both webkit and chromium).
For KitKat (chromium 30) we managed to get rid of the problem simply by making touch event handlers call the functionality in timeouts. This however won't work for older and especially slower devices (tested on Galaxy tab 2 and Galaxy S2).
I'll be very thankful for any answers on the subject.
EDIT
I should also note that I read through the WebViewInputDispatcher (android.webkit.webviewinputdispatcher.java, android 4.1.1) and it describes the behaviour = queueing the touch event to the web handlers > starting timer > timer exceeds 200ms & web event not consumed by web code > cancel web event and call ui touch event instead.
So.. I am developing the mobile versions of my website and noticed that my 'rating' script whereby a user selects a certain number of stars did not work on the iPad.
The functionality worked with a jquery .on('click' in a normal web browser.
I googled it and found tap and touchstart
Changing the function to .on('click touchstart' made it work on the iPad. Great !
I have now implemented a form where on checking a checkbox some extra fields are shown/hidden.
Again I used .on('click' - this time I was trying it on an android phone. The .on('click' didnt work for a checkbox..? I tried adding touchstart with no success. I then added tap and bingo it works.
Doing a little more research i noted others saying not to bind two gestures as in certain situations the event could be triggered twice. Fair enough.
COuld someone thus advise and explain how 'clicking' works with different elements on normal web browsers, android devices, and i devices.
An example of how you can then implement only using one gesture, but the right one depending on the device would be great.
N.B Im just using normal jquery.
Many Thanks
I know there are a lot of these questions on the internet, but I've tried every solution (all the answers of this question), and none of them worked.
When I run the site in my PC's browser everything's fine, but as soon as I deploy on the phone, the response time is very laggy.
I've tried using FastClick, setting hoverDelay to 0, and binding my own events, but the result is the same.
Am using Android 4.1. Would appreciate any help other than what I've tried.
To speed up JQM, you have to turn off any transitions.
It sucks, but the JQM transitions are too slow for mobile devices, even on iOS. We'll just have to wait a few years until the hardware gets faster I suspect. This is despite the JQM team trying to improve the performance in 1.2. I still can't use the transitions without my apps feeling sluggish.
I always use these settings to get the best performance out of jQuery mobile.
$.mobile.defaultPageTransition = 'none'
$.mobile.defaultDialogTransition = 'none'
$.mobile.buttonMarkup.hoverDelay = 0
As well, if you are writing any javascript, do not bind to any 'click' events. Click is way too slow on mobile devices as it has an additional 300ms delay before the event is triggered.
Since you are using JQM, you can use their own click event vclick instead (which under the hood is using touchstart and touchend events).
If it's still really slow for you after that, you might have to examine what is actually happening in your click events - perhaps your code is not as optimised as it could be.
You'd be better off using the tap event than the click event if you want to work around this for a mobile application.
Have a read of Tap vs. Click: Death by Ignorance by John Bender
This code snippet worked for me
var ua = navigator.userAgent,
event = (ua.match(/iPad|Android/i)) ? "touchstart" : "click";
$("button,a").bind(event, function()
{
$(this).trigger('click');
});