Google Maps touch events not working on mobile devices - javascript

I'm running into an issue where touch events do not work, but click events do.
If you visit Google's Javascript Events page, you'll notice that click events work and so do drag events. Now, in Chrome, use the device tool to change to an iPad. Without refreshing, try to drag and swipe around. It won't work. Normal click events will still work. Now refresh the page while in iPad device view. The touch events will work.
Our issue is that we're always stuck with the touch events not working, even on touch devices.

Actually, there are already two related Issues #6425 and #4599 reported in gmaps-api-issues.
And, based from the threads, these issues are not fully resolved yet. There are, however, given workarounds which you can also try and one is available in GitHub - googleMapsAPITouchWorkaround.
For more of the workarounds, please go through the issues recorded in the tracker.

Related

How to trigger MacBook trackpad haptic feedback on a website?

I'm writing a web application with a lot of drag and drop functionality and I want to enable haptic feedback (when possible, using macOS 10.11+ with a Force Touch trackpad) for actions like "snapping in" while dragging items.
Is this possible (I know it's impossible to support every platform, but at least when hardware supports it)? I've tried navigator.vibrate with different time values/patterns but it doesn't seem to do anything even if it returns true.
Should work with the Force Touch events, one of which is webkitmouseforcedown
someElement.addEventListener("webkitmouseforcedown", myFunction, false);
You can read more about this and the other events here
Please note that this will work only on Safari unfortunately

Deprecated touch operations on mobile apps

In past mobile apps that I developed, I found that the click event did not work as expected in all devices (for example: in games in which the user had to tap/click quickly on the screen, instead of triggering the click event, the double click was triggered), and using touchstart gave better results for what I wanted.
Since then, I started listening to the touchstart event instead of click; but testing on Chrome, I got the following warning message in the JS console:
Performing operations that require explicit user interaction on touchstart events is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5649871251963904 for more details.
I visited the linked page (and the links inside it) and it seems that this new behavior is to avoid certain unwanted actions, and in particular to avoid third-party iframes or ads (my app has none) from opening pop-ups. I tried changing the event to touchend (as one of the links stated "The touchend event will continue to behave as before"), but got a similar warning message.
And my questions:
Is this something that only affects Chrome, or will it affect my web apps (with Cordova/Phonegap) for Android and iOS?
What event should I use to replace touchstart and avoid the issues I faced in the past? I could go back to click, but fast clicking/tapping would still be a problem.
When creating Cordova app, you target different OS versions, Android 5 and up has auto updating webview based on Chromium, so that problem will probably affect your apps.
But since Chrome 32, when using this viewport <meta name="viewport" content="width=device-width">, the click delay should go away (see this article), so you could safely use click event. Latest webviews on android 5 and 6 are based on Chromium 52.
You can also use fastclick library that will "fix" the click delay only where it's necessary

iPad/Safari scrolling iframe does not allow host page to scroll (the iframe itself is scrolling)

What's the Problem:
Unfortunately I must use an Iframe in a web solution (tenant scoped SharePoint hosted App with App Parts).
The iframe needs around 50% of the website's space and the space for it in the host will be programmatically blown up in size so that there will be no scrolling bars shown. It works good on every browser except Safari. In Safari the touch event seems to be caught by the iframe window and will not be forwarded to the host window. Imagine this on the iPad: in over 50% of the page the user can't scroll down the page.
Hardware I used for testing:
Windows 8.1 (touch enabled screen) with latest version of Safari (5.1.7)
iPad with iOS version 8.4.1.
What I researched/tried so far:
This has nothing to do with everything that can be solved by "-webkit-overflow-scrolling: touch;" and similar approaches. From what I understood in my research, this will make the iframe scrollable but I need to make the host window scrollable when moving the finger in the iframe area. In other Browsers the iframe for example scrolls down until the end and then starts scrolling the host window
In some post one suggested to overlay the iframe with a div (z-index: 2) and then forward the click events from this overlaying div to the Iframe window ( I do have control on this Iframe window, so I can catch events in there). The overlaying div fixed the scrolling behaviour on my testing page but not in my target application, so it's not a reliable solution. Besides that: I managed the click event to be triggered (with same approach as in 3.) but could not manage to make it click links in my iframe-page (what I need... because this is the reason why I want the clicks to be forwarded.)
Another approach was to forward the touch events from the Iframe page to the host page. I did this via postMessages, JSON-stringified event parameters and a javascript library called "jquery.simulate.js" that is used to simulate touch events. I did not manage to trigger the touchmove event correctly on the parent window (and besides that I doubt that this is really good concerning user experience and performance)
I also thought about getting the simple html from the Iframe and add it to the host page programmatically. Unfortunately SharePoint hosted Apps are hosted on other subdomains, so due to the cross-browser restrictions I think is not worthid to follow.
Another approach was pointer-action: None; - This also breaks the link functionality and unfortunately worked only on the desktop
Setting scrolling="no" (or "yes") did not have any effect nowhere (maybe because it's gone in HTML5)
So here I am stuck... and it seems that no one else in this world has the same problem as I cannot find any really working idea anywhere. But I tested around 20 different websites with iframe - and I tested with the Desktop touch and the iPad.... and I have the same problem. I could not find a single Safari-Touch-working iframe throughout all suggestions and possible solutions.
How to reproduce:
A simple
<iframe src="http://www.w3schools.com"></iframe>
embedded on any html page with long content, Safari and a touch device (similar to the ones I used for testing) should be enough to reproduce.
What I want to know:
Does anyone have the same problem?
Could you put me into the right direction? I am actually unsure which of the above mentioned approaches I should continue to go on with
Do you have a completely new idea that I could follow?
Did you test this on any other device and know it's working? (I am thinking maybe downgrading could be a solution)
Edit: (Solution Nr. 2) The overlaying div makes the page indeed also scrollable in Safari, but I could not find the correct way how to forward the click event to the child successfully (meaning: which of the event parameters are necessary to be forwarded to trigger the click event in the child window?)
Edit: Searching again and found out that you cannot create events like clicking programmatically due to security reasons. Makes sense as this will be a big security issue if you could force the user to click on your ads for example.
How can I click on specific (x,y) coordinates on a web page?

Javascript on mobile sites: Is it OK to use click?

I'm creating a mobile version for my sites, and I was wondering: is it ok to keep all the click events in the javascript as they are, or should I change it to tap (for example tap.js)
I've noticed that click works in all the browsers that I tested (Native, Dolphin and Chrome on Galaxy S2). Do you know of any issues in keeping the click events?
Mobile browsers are designed to work with most sites out of the box, thus they implement the click event just as desktop browser.
However, as Torsten Walter explained you might induce a noticeable delay if you don't explicitly manage the tap events.
To make it short : click will work but managing tap too will improve touchscreen user experience.

Events not honored on text inputs or textarea elements within iframe on ipad ios 5

I have a form within an iframe on a website that I am testing on iPad. It seems that the touch events do not work on the inputs with type "text" or textarea elements. Swiping or touching does nothing on those areas and the keyboard does not pop up. The combo box (select) elements I can interact with just fine. Is anyone else having this problem?
I have no issues on iPad iOS 4.3 only on iPad iOS 5. The markup and styling are pretty standard, but if no one else is experiencing this issue I can post the code. The only unique element that I can think of is that all of the markup is loaded dynamically using jQuery tmpl.
I have only seen documentation online regarding scrolling of textareas but this seems to be a separate issue.
Correction *
I just hit the page directly (outside of the iframe) and am still having the same problem. So has anyone seen this behavior before? Is it due to strange CSS styling? Z-indexing?
OKAY GOT IT! So I noticed that click events were registering but default drag behavior was not. I also remembered that I had implemented a jquery ui extension for draggable behavior that hooked touch events into their click and mousemove event handling. That was the culprit. I removed that extension and added this instead : github.com/furf/jquery-ui-touch-punch This works on both iOS 4.3 and iOS 5.1
I guess that has to be a bug in iOS...
Or could you post a link to what you have made?
I could test it on my iPod Touch...
I've had this problem for days now, and from googling around, most of the internet has too. But none of the posts contained an answer. This is the solution that worked for me. It's based on https://gist.github.com/tamarasaurus/dcf2d0331043586421f3. Hopefully this will help people in the future, or at least point them in the right direction.
document.addEventListener('keydown', function(e) {
window.focus();
});
document.addEventListener('touchend', function(e) {
window.focus();
});

Categories

Resources