Appreciation to @tony19 for the valuable input.
In order to prevent any delays, I conducted further research and successfully resolved the issue on my own. To provide an answer to my initial query: the ultimate solution was found within the FastClick library.
The issue at hand is that the tap
event is triggered instantly, yet it does not replace the click event. Instead, the click event still occurs, but with the original 300ms delay. This delayed click event then activates the input-field (or button if present) at the same x-y coordinates on the newly displayed 'page'.
Incorporating the FastClick library once again resolves this matter thanks to some recent updates in the library. However, it disrupts certain elements that require the original click functionality, such as Google Autocomplete. A simple workaround to exclude FastClick is by implementing it as follows:
FastClick.attach(document.body, {
excludeNode: 'something', });
This method only applies to that specific node and not its potential children. Consequently, rectifying everything for input fields in conjunction with Google's Autocomplete feature can be achieved through the following code snippet:
// Disabling FastClick for the descendants of a google autocomplete component.
var needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function(target) {
if ( (target.className || '').indexOf('pac-item') > -1 ) {
return true;
} else if ( (target.parentNode.className || '').indexOf('pac-item') > -1) {
return true;
} else {
return needsClick.apply(this, arguments);
}
};
// Eliminating click delay on iOS. By doing so, eradicating disparities
// in timing between click and tap events, thus averting the
// fall-through scenario.
FastClick.attach(document.body);
I am now concluding this discussion, but I believe leaving this information here could serve as a helpful guide for others encountering a similar issue.