honglio / niukj

An Online Authoring Platform - write & present & share your slide
http://www.niukj.com
Other
0 stars 0 forks source link

Eliminating the 300ms delay that click events have on platforms like iOS #26

Closed honglio closed 9 years ago

honglio commented 10 years ago

There are a couple of work around for the 200/300 ms delay in touch the problem is that those solutions are mostly vendor specific (every browser define it's own solution) the most common and easier one is using touch events (touchstart, touchend) since those events does not have the delay in them.

https://github.com/leongersen/noUiSlider - implement this solution (along side with some CSS adjustment).

https://github.com/ftlabs/fastclick - Applying a website wide solution (like fastclick) may cause performance issues.

Seems Kendo UI performance is not perfect either: http://www.telerik.com/forums/performance-issues-51e3e41dc6ea What's strange is that they seem aware of the situation but hesitant to adopt or copy something like Fastclick. Earlier they claimed the didn't have the general 300ms problem though: http://blogs.telerik.com/appbuilder/posts/13-11-21/what-exactly-is.....-the-300ms-click-delay

the best library https://github.com/filamentgroup/tappy

honglio commented 10 years ago

We can use this CSS for IE10 and IE11: html { -ms-touch-action: manipulation; /* IE10 / touch-action: manipulation; / IE11+ */ } We can also put minimum-scale=1.0, maximum-scale=1.0 to the viewport without affecting anything (this was almost done, but having the minimum and the maximum will work for all browsers). PS: This does not make difference on Safari The usage of FastClick can really impact on performance issues, because we will be adding scripts to the page DOM, without knowing what exactly the scripts are doing. Is the faster approach, but with Tap we can change all the click events and put a tap event instead, and have more control of the events. However, in some cases when action is performed or we submit a form (like the condo search button), we don't have the click event fired. So in this case we need to use the generic function for all anchor tags. If we are going to use Tappy, we need to update the Wiki and put a huge advice to always use tap instead of click, since click is well-know event. We can simply perform the "touchend" event (which is better than touchstart) instead of the "click" event, but Tappy also handle with the possible issues. Testing

I tested using generic functions of Tappy. For the index page the generic function won't work only on Learn More button, because it kills the scroll action. On Condos Page and Condo Search Engine Page everything went ok. The Condo Page where contains the details of the Condo was also improved // Generic function $( 'a' ).each( function(){ $( this ).bind( 'tap', function(){ window.location.href = this.href; }); });

honglio commented 10 years ago

waiting for #38

honglio commented 9 years ago

27