Google Maps v3 InfoBox Event Propagation in Mobile Safari

Question

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!

Answer 1

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)

Answer 2

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

touchstart worked for me