Google Maps v3 InfoBox Event Propagation in Mobile Safari - javascript

I have created an infobox using google maps api v3 and infoBox from the maps utility library . The infobox has overflow-y data. Scrolling works exactly as expected on IE, FF, Chrome and Safari desktop. Scrolling does not work at all, however, in mobile Safari. It's almost as if the infoBox doesn't detect a touch to start scrolling.
I've created this jsfiddle to demonstrate the problem. As you can see (in the iOS simulator or on an iOS device), the mouseenter, touchstart, mouseleave and touchend events are being triggered just fine; it's just that there is no way to scroll down to see the overflow text.
I've been struggling with this all week. Any help would be greatly appreciated!

I don't know if it's a bug in mobile safari (pretty likely), infobox.js, or google maps, but for some reason, scrolling won't work inside an infobox on mobile safari if event propagation is enabled on that infobox. Scrolling will work in other browsers (FF, Chrome and desktop Safari) when event propagation is enabled. Also, scrolling works just fine in mobile safari with event propagation turned off for the infobox.
So, the hack that I used to solve this problem was simply to determine whether the client was an iOS browser and then set event propagation accordingly. I know that this approach is hackie, but it was the best that I could come up with. See this fiddle for confirmation that it works in both mobile safari and other browsers. Also, make sure that you're using the most recent version of infobox.js (1.1.11)

// For infobox
var myOptions = {
enableEventPropagation: true
};
$(document).on("click touchstart", ".clickableclass", function() {
// your function
});
touchstart worked for me

Related

touchmove Event not firing on iPhone Safari

Does the touchmove event NOT work on the iPhone's Safari browser?
I'm not talking about an iOS App, just a regular old HTML page with some Javascript and jQuery that's loaded into the iPhone's Safari Browser.
I actually connected my iPhone to my Mac-mini - which is also running Safari, so I can see everything that's happening on the iPhone in the Mac-Mini's Safari console - and my touchstart and touchend events DO fire, but touchmove just does NOT respond.
Here's the code:
document.addEventListener("touchstart", onMobileTouchStart, false);
document.addEventListener("touchmove", onMobileTouchMove, false);
document.addEventListener("touchend", onMobileTouchEnd, false);
function onMobileTouchStart(touchStartEvent) {
console.log("\n==>'onMobileTouchStart'!!!");
touchStartEvent.preventDefault();
}
function onMobileTouchMove(moveEvent) {
console.log("\n==>onMobileTouchMOVE'!!!");
moveEvent.preventDefault();
}
function onMobileTouchEnd(touchEndEvent) {
console.log("\n==>onMobileTouchEnd'!!!");
}
What I'm ultimately trying to do is get a custom pinch-zoom type behavior going, and my understanding is that this has to be implemented in the touchmove event - so that's why I'm asking.
I can't see any other way of tackling this unless touchmove starts playing nicely.
Any thoughts, tips or workarounds for this?
I see the same problem in May 2021. I get the touchmove events just fine if i try it on Google Chrome, but Safari, on 14.4.2 (latest version), the Safari browser gives me the initial touchdown event, but subsequent touchmove events are not being fed to me.
Clearly the browser is stealing the touchmove event, because it wants to scroll something, and as usual scrolling is fouling up everything, because it is one of these things that HTML / JS spec doesn't really cover, as it is magical browser behavior.
I have a overflow:hidden on my body tag, so there shouldn't be any scrolling anyway. Not sure how to fix this browser quirk, since the iPad is a massively popular device, i must figure out how to fix it, but i am baffled at the moment.

Comment box in qTip disappears onfocus for IE/Edge browser with touch devices

I am making use of an external JavaScript library qTip. My application has a feature of 'StarRating' and 'Comments', which is provided through this plugin.
After providing a rating through the stars, one can enter the Comments(optional), which opens up in a dialog.
This scenario works well across all the major browsers i.e. Chrome FF and IE but not in IE (touch devices) and Edge browser (touch devices). As soon as the stars are clicked and on focus inside the input box, the dialog box disappears in the touch devices with IE and Edge only, but works well in Chrome and FF (touch enabled).
I don't know whether there is an issue with the library or with the touch events.
Microsoft Edge doesn't support touch events by default. It has an alternative system called pointer events. Sometimes 3rd party libs implement touch based widgets that don't play well with pointers. A quick way to determine if this is the case is to switch on touch events inside of Edge. Put about:flags in the address bar then go to the setting enable touch event and change it to always.
If the site now works, then I suspect it's an issue with the library. If that is the issue then I'd raise the issue with qTip they can probably help identify the issue specifically so that it can be fixed in the library.

Hammer.js swipe events not being triggered on Safari iOS

I'm trying to add swipe gestures to an image carousel, but I'm having issues with Safari on iOS.
My hammer.js initialization looks like this:
this.mc = new Hammer.Manager(this.$carousel[0]);
this.mc.add(new Hammer.Swipe({
direction: Hammer.DIRECTION_HORIZONTAL,
threshold: 0
}));
Where this.$carousel[0] is the div containing all the images, and the event binding is set like this:
this.mc.on('swipeleft', this.slideLeft.bind(this));
this.mc.on('swiperight', this.slideRight.bind(this));
However, this.slideLeft and this.slideRight never get called.
The weird thing is that the same code seems to be working ok on Chrome on different Android versions, and it fails to trigger the swipe* events only on Safari on iPhones.
Any ideas about what I may be missing?
Turns out there was a bug in version 2.0.1, the one I was using, where some of the events composing a swipe event were being fired in the wrong order; with version 2.0.6 it seems to be working as expected.

Touch API (e.g. touchstart) not working in MS Edge

my application is using the Touch API to detect touch events in JavaScript. Example:
$(".element").on("touchstart", function(event){
alert("TRUE");
});
This works on any touch device with any browser like Android or iOS, however it doesn't work in MS Edge on a Windows 10 Tablet with or without conntected keyboard. The API seems to be supported: Compatibility list. However, I've tested: 'ontouchstart' in window and this returns false on this device. Furthermore mousedown seems to get fired.
What is going on here? What can I do to fire touch events on a Windows 10 tablet?
I would like to keep the event only for touch devices. Switching to the Pointer Events API would include also Desktop devices and that is not what I want.
for touch API, you have to activate a flag on Edge : in the address bar, enter about:flags and press enter. In the section Touch, you can enable touch events with the corresponding dropdown
Did you enable custom touch handling ? You can do it with the following css snippet (on the body tag or just a container for geastures) :
-ms-touch-action: none;
Next, touch API is a webkit feature (maybe there is an error in CanIuse ?). IE and Edge have a similar feature known as Pointer API. But you can use a polyfill library like this :
https://github.com/CamHenlin/TouchPolyfill
Try using the pointerdown event. Some (much) more information. As you can see, touchstart is triggered by Edge but not in all configurations, when a keyboard is attached/paired for example, no touchstart.

How do I detect when the address bar of mobile Safari hides on GWT?

GWT 2.5.1 /
MGWT 1.1.2
I added a resize handler to the Window, however no resize event is triggered when the address bar hides in mobile safari (tested on iOS 6x), The event is properly thrown if the handler is added natively with Javascript.
I'm not sure what event to expect when that happens. I don't want to rely on solutions that require setTimeOut's, native code or any other battery consuming workarounds.
Any ideas?
EDIT:
This behavior seems to be a bug on MGWT code. I already issued a report:
https://code.google.com/p/mgwt/issues/detail?id=300&can=4&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Estimate

Categories

Resources