I'm working on a three.js project in which I am using TrackballControls to enable touch events. But I found that my code were not working properly. I also evaluated some working examples like http://threejs.org/examples/canvas_geometry_cube.html and found at start there is a small delay of 300 ms. But it do affect a lot in my project. How could I remove this 300 ms delay?
Note : I uses both single and multi touches in my project.
I went through the concept of fastclick ( https://github.com/ftlabs/fastclick ), but for me it doesn't seem to support multi touch. If I'm wrong, please correct me.
I remember hearing something about this: http://code.google.com/p/chromium/issues/detail?id=133391
According to the linked issue, in Chrome for Android the reason for the 300 ms delay is to recognize a double-tap zoom gesture. With the change made there (in October 2012), the delay will not be imposed if the page cannot be zoomed. So, at least in this case, what you need to do is set your page meta viewport options so that the page fits the device screen and doesn't zoom.
(Disclaimer: I've never tried this myself; I just heard about it once. I have no idea if this behavior is in current released Chrome for Android, and I don't know whether other mobile browsers, such as the stock Android browser, do the same.)
(Other disclaimer: I work for Google, but I don't work on Chrome, and I am not answering on behalf of Google here.)
Finally I found a way... I was using touch to drag and drop an object in the scene... The actual problem was as follows... The 300 ms delay of touch events get combined to form a large delay... In order to overcome this, I gave a condition so that touch move events are taken with a delay of 300 ms... i.e if one event is taken, the next event taken will be the event after 300 ms... and its working quite fine...
Related
I'm trying to build a Point of Sale app for ChromeOS using HTML5 and JavaScript. I'm using Materialize and jQuery for front end. When I try typing a number very quickly using the on-screen number pad, sometimes numbers are skipped. A good example would be trying to type 1752703, since it's my employee ID at my current job. Even though the CSS effect engages to show I pushed all the numbers (the ripple effect), I may end up with something like 17203 instead of the full number.
Is there any way I can improve touch performance? Is it the type of screen I'm using? What could be causing this to happen? If it's because my Chromebook is capacitive, it's not a big deal, because I could deploy this on any device I could get Chromium OS to run on. But if it's something programmatical that I can improve, that's the first step I'd like to take.
Here is the basic code I'm using for just punching in a whole number:
$(".numBtn").click(function(){
input(Number($(this).text()));
});
And here is an example of it in action (apologies for lack of styling):
Live Demo
First
The problem seems not to be the device itself, but rather the effect of having a touch-enabled device which supports pinch zooming.
On most of these devices, by default, there is a 300-350 ms on-click delay which allows most of the users to double click, or as mentioned, pinch zoom.
Google has brought a solution for this issue in 2014, when they have removed this delay by still keeping the pinch zoom function on.(1)
The quick fix for this is only one line of code in the <head>
<meta name="viewport" content="width=device-width">
This meta tag is going to disable pinch zoom for your website only by telling the browser "this is how I need to be displayed, so there's no need for zooming in the page". The purpose of it is mainly to allow a better user experience in websites with responsive design.
I have tested your website with the new meta tag and the delay seems to disappear. There is still a very small delay when you tap very fast, but the most of the users won't be able to do it such quickly.
Second
Another potential solution is to use a plugin called Tappy which replaces the click event with a tap one, promising "that it will allow you to execute code immediately on touch devices, eliminating the 300ms delay that click events have(2)."
The plugin repository can be found [here][3], where you can also look at the implementation instructions - especially at this one, which is a modified version that binds the tap event to all <a> elements:
$(document).ready(function(){
$("a").each(function(){
$(this).bind("tap", function(){
window.location.href = this.href;
});
});
});
Note that you will need jQuery to use this plugin. In case you don't use jQuery, write a comment and I will provide a vanilla JavaScript (potential) solution.
References
(1): https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
(2): https://github.com/filamentgroup/tappy/#why
On this page:
https://github.com/Polymer/polymer-gestures
it says that the "pinch" gesture should already be developed but other ones like hold, holdpulse and release shouldn't, playing with the provided sample:
http://polymer.github.io/polymer-gestures/samples/simple/index.html
I cannot recreate the pinch gesture no matter what, but hold, holdpulse and release keep coming out quite easily, do you know what can be the case?
I've created a simple jsfiddle but it's quite hard to use it on a mobile:
<div on-pinch="{{pinchAction}}" on-tap="{{tapAction}}">{{txt}}</div>
http://jsfiddle.net/mLT5G/77/
I'm using Google Nexus 5.0 either with most recent Chrome or Chrome Beta.
Thanks!
PS In this example:
http://jsfiddle.net/Lhwc6woa/
I cannot get any events coming from the second finger, so I guess that's why pinch doesn't work..
It looks like it was a temporary issue, it works at the moment, you can check that out using a jsfiddle attached above.
So I built what I hoped would become a simple android game. I first built a web version to getting it working (http://scolvin.com/ballgame) then moved it to PhoneGap and used accelerometers to control the game. The only problem (and it's a show stopping problem) is that the result is horrifically slow (updates i guess about once a second instead of ever 20ms ish).
Is this just how slow phonegap is, with no current solution? Or is there some golden bullet I'm missing?
The game uses easeljs and box2d-web.
What's odd is it seems to run at a reasonable speed on android chrome, but very slow on android's "browser" (which I seem to recall is based on firefox?) and in phonegap which presumably uses the same html renderer/js interrupter.
I've tried simplifying the game, getting rid of as much as i can, using setInterval rather than accelerometer.watchAcceleration all to no avail.
It's a problem of the Android Browser
See the following answer:
Sencha Touch 2 - Android Performance
(It's for Sencha Touch, but i think the main points of the answer are the same)
Instead of using setInterval() for FPS thing, you must use requestAnimationFrame() It is far more efficient
iOS 5+ and Android 3+ use hardware acceleration for Canvas, so you will need atleast those devices for solid performance. Anything before iOS 5.0 and Android 3.0 will use CPU using software-rendering.
So need to keep that in mind
Is the performance issue with rendering or reading the accelerometer? Maybe you could create a demo mode to check how it behaves without user input.
I have a problem where Mobile Safari crashes when loading and manipulating the DOM with jQuery when the pages get too big.
I get the same problem on both iPhone and iPad.
What are the best way to troubleshoot mobile pages to find the error? Are there any known problems that might crash Mobile Safari?
I actually found the problem. It wasn't with JS as I thought, but with the CSS. I added class to make a CSS transition to fade in some elements. For anonymous users these elements had display: none; and probably never ran the opacity transition.
The strange thing is that the transitions was on exactly two elements. So why would this only crash on long threads with 100+ comments?
So the bottom line is: -webkit-transition crashed the page on mobile safari.
Had the same issue, for me it was -webkit-transform: translateZ(0); that caused the crash of Safari.
I know this question has been successfully answered but I just wanted to put my five cents in too as I have been banging my head against the wall over this one quite a few times:
As most answers have pointed out already it usually comes down to memory issues. Almost anything can be the last bit that finally tips over the "memory pile" much like a translateZ or anything else.
However in my experience it has nothing to do with the actual CSS (or JS) command in specific. It just happens to be that the last transition was one too much.
What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.
The main issue with any iOS app is memory usage. So, it is likely that your pages are using too much memory.
Mobile Safari use some clever technique so that not the whole page has to reside in memory at any given time, only a portion of it. Maybe you could check if anything in your page defeats this mechanism or makes it less effective.
In any case, to give more up to the point suggestions, more information about your page would be really great.
By the way, you could have some hints from the crash log that the device store. Check to see if you can find it under Settings:
General
About
Diagnostics & Usage
Diagnostics & Usage Data
If it's a memory problem, you should find something like "signal (0)"; not sure if this can only mean "killed due to memory usage", but I usually take this for granted when I found a signal (0).
Otherwise, it might tell you what is wrong...
Hope this helps.
There are both memory limits and Javascript execution time limits, though it's a little fuzzy as to how you may actually hit those. Common reports come in that a page with a size greater than 10MB will have issues, and Javascript execution is limited to 10 seconds.
See Apple's documentation for more info.
I recently had an issue with mobile safari crashing on web-app pages containing a lot of images (30+ were enough) and a few transformations for the menu. After a lot of trial and error, I settled with a solution similar to what LinkedIn does, but for infinite scrolling using angularjs. I used requestAnimFrame and two expanding/shrinking divs (with js style attributes) on the top and bottom of the list to remove all image containers (with other stuff overlayed on top) except for a few ones which are close to the viewport. Scrolling performance (native, no js) is fine and memory consumption is in check.
I had a similar problem, the web page worked like a charm on android devices and crashed on IOS (iphone and simulator).
After a lot of research (using also the ios_webkit_debug_proxy) I found that the problem was connected to the jQuery ready event.
Adding a little timeout solved the problem. My application was also using iframes.
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});
Somehow I must've missed the proper documentation for something as simple as this. Searching via Google does not exactly yield useful results either.
So, here's what I want to do: Draw a rectangle (div), make it draggable and drop it somewhere else, with a proper validation that the drop point is an actually valid one.
How would I go about doing that with the tools provided by the Visual Studio 11 Beta?
All I've found so far is the onDragging-Event which is not really helpful due to the scarcity of information provided.
Code sample would be great, I could also live with a link to some blog or such.
Edit: Drag and drop through touchscreen input, that is, not through the "normal" mouse interaction.
Just got a reply from a Microsoft employee: It's a bug:
http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/88cfb689-2e38-417c-a2be-9682f1a23ae4/
So, until that bug is fixed, it seems you really have to roll your own.
The following link a walkthrough of HTML5 drag/drop in IE10 from the IE blog. IE10 is the engine for Windows Web Apps so this will work in your Windows 8 app.
http://blogs.msdn.com/b/ie/archive/2011/07/27/html5-drag-and-drop-in-ie10-ppb2.aspx
Up until and including the beta (CP) we were able to use the dragstart, drag, dragend events even for touch input in Metro. In the newer builds this has stopped working (events don't fire anymore) and it looks like we'll have to switch to MSPointerMove et al. for handling touch-dragging.
From a few samples I created it seems that standalone IE has never supported dragstart, drag and dragend for touch - in other words touch drag works in my sample inside beta Metro, but same file doesn't work inside normal IE there.
Re the answer from Microsoft employee mentioned below, I believe that bug is unrelated to the issue of touch-dragging.