Cordova-plugin-googlemaps: Touch events bleed through divs to the map when they are animated over the map

[aMUSiC]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [x] iOS

cordova information: (run $> cordova plugin list)

branch-cordova-sdk 2.6.0 "branch-cordova-sdk"                                                    
com.adjust.sdk 4.12.5 "Adjust"                                                                   
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"                                               
com.testfairy.cordova-plugin 2.9.0 "TestFairy Plugin"                                            
cordova-android-play-services-gradle-release 1.2.1 "cordova-android-play-services-gradle-release"
cordova-clipboard 1.1.1 "Clipboard"                                                              
cordova-plugin-actionsheet 2.3.3 "ActionSheet"                                                   
cordova-plugin-advanced-http 1.11.1 "Advanced HTTP plugin"                                       
cordova-plugin-allow-backup 0.0.2 "cordova-plugin-allow-backup"                                  
cordova-plugin-app-version 0.1.9 "AppVersion"                                                    
cordova-plugin-badge 0.8.7 "Badge"                                                               
cordova-plugin-calendar 5.0.0 "Calendar"                                                         
cordova-plugin-camera 3.0.0 "Camera"                                                             
cordova-plugin-datepicker 0.9.3 "DatePicker"                                                     
cordova-plugin-device 1.1.7 "Device"                                                             
cordova-plugin-dialogs 1.3.4 "Notification"                                                      
cordova-plugin-facebook4 1.9.1 "Facebook Connect"                                                
cordova-plugin-file 6.0.1 "File"                                                                 
cordova-plugin-firebase 1.0.0 "Google Firebase Plugin"                                           
cordova-plugin-googlemaps 2.3.0-beta-20180430-1841 "cordova-plugin-googlemaps"                   
cordova-plugin-googleplus 5.3.0 "Google SignIn"                                                  
cordova-plugin-inappbrowser 1.7.2 "InAppBrowser"                                                 
cordova-plugin-ionic-webview 1.2.0 "cordova-plugin-ionic-webview"                                
cordova-plugin-market 1.2.0 "Market"                                                             
cordova-plugin-network-information 2.0.1 "Network Information"                                   
cordova-plugin-screen-orientation 2.0.2 "Screen Orientation"                                     
cordova-plugin-splashscreen 5.0.2 "Splashscreen"                                                 
cordova-plugin-statusbar 2.3.0 "StatusBar"                                                       
cordova-plugin-whitelist 1.3.3 "Whitelist"                                                       
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"                                             
cordova-sqlite-storage 2.3.0 "Cordova sqlite storage plugin"                                     
es6-promise-plugin 4.1.0 "Promise"                                                               
ionic-plugin-keyboard 2.2.1 "Keyboard"                                                           
uk.co.workingedge.phonegap.plugin.launchnavigator 4.2.0 "Launch Navigator"                       

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

@ionic-native/core: "4.4.0"
@ionic-native/google-maps: "^4.7.0"

Current behavior:

In the page that has the map, I have several buttons that when you tap them they enable (with ngIf) and slide in/fade in various divs (such as calendars or option selectors) over the map (no page changes). Tapping on those buttons again will disable the divs. When I tap inside the overlayed divs, the map behind them receives the touches instead of the divs.

Expected behavior:

The divs should receive the touches, and the map shouldn't receive them/move etc.

Additional information:

• Any div that exists already in the page over the map (and is not animated in), will correctly receive the touches
• Pushing pages to the stack works perfectly as well.
• This has been a problem again in the past, but at some point it was fixed. The last commit that I have tried where the problem does not exist is https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/5f4a80a295a7a695c8aeef354d7d59cb152c6790 from April 3rd. I couldn't test which commit exactly introduced the problem as from commit https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/c3574354deaa033adc86ec65c5571b16ba7aa0f1 to commit https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/32a9f3da78613cce5c05290151ca98cc869a89d0 my app would not launch since multiple_maps would cause a javascript error (instance[output.propName].subscribe is not a function)
• I tried to work around this problem by calling setClickable(false) when I animate the div in, and setClickable(true) when I animate the div out. This way the touches go to the divs, but when I call setClickable(true), the map will not receive any touches immediately. I first have to touch any other element outside the map and only then the map will start receiving touches again. I also tried putting setClickable(true) in a timeout so it is called after the divs have transitioned out, but the behavior is the same.

[wf9a5m75]

Did you try cordova.fireDocumentEvent('plugin_touch') after animation is done?

[wf9a5m75]

If you can't solve your problem by yourself, please share your project files on github.

[wf9a5m75]

ping

[aMUSiC]

I tried cordova.fireDocumentEvent('plugin_touch') but it doesn't make any difference. However there is definitely something wrong with what happens in the transitionEnd events in the plugin, and it looks like the touchable area detection of the plugin, happens for the previous transitionEnd, and not the current.

Example:

Map is full screen (100% width / 100% height)
Div 1 and Div 2 are 100% width / 50% height and have z-index larger than the map.
Both Div 1 and Div 2 are positioned absolute at top: 0 and have translate3d 0, -100%, 0.

Initially, the map moves ok wherever I touch it.

I animate Div 1 to translate3d 0,0,0 so it covers the top half of the map.

The map moves wherever I touch it, even if I touch Div 1.

I animate Div 1 again back to translate3d 0, -100%, 0 so the map is fully visible again.

The map does not move if I touch the top half of it, but moves ok if I touch the bottom half of it.

I animate Div 1 again to translate3d 0, 0, 0 so it covers the top half of the map.

The map moves wherever I touch it, even if I touch Div 1.

I animate Div 2 to translate3d 0, 0, 0. (on top of Div 1 so it too covers the top half of the map.).

The map does not move if I touch div 2, but moves ok if I touch the bottom half of the map.

I animate Div 2 back to translate3d 0, -100%, 0.

The map moves wherever I touch it, even if I touch Div 1.

I animate Div 1 again back to translate3d 0, -100%, 0 so the map is fully visible again.

The map does not move if I touch the top half of it, but moves ok if I touch the bottom half of it.

All animations are done with css (transition: all 0.3s ease-out).

So it looks like that the touchable area calculation of the map is one transition behind.

[wf9a5m75]

As I said, If you can't solve your problem by yourself, please share your project files on github.

[aMUSiC]

I have found a workaround by checking your commits so I have solved my problem, but I am trying to help you pinpoint the bug in the plugin.

I had to use cordova.fireDocumentEvent('plugin_touch', {force: true}) after the animation ends (it will not work without force: true ).

So I suppose this was removed at some point from the plugin code in the transitionEnd touchable area detection. If this was done on purpose because it conflicts with some other mechanism of the plugin, then maybe it should be exposed as a method of the map plugin and be included in the documentation (like let's say recalculateTouchArea(), which would be a wrapper for the plugin_touch cordova event.

[wf9a5m75]

Since there is no contribution, no help.

[aMUSiC]

Since I cannot share my project files due to NDA, I have created a very simple sample project where the bug I am describing is demonstrated here https://github.com/aMUSiC/gmapbugs

(You'll need to use your own google keys for the map though)

Click on the Toggle button, and it will animate in a div to cover half of the map. You'll notice that the map will still move if you touch your finger on the blue div. Then click on the toggle button again to hide the div. You'll notice that the map does not move if you touch it where the div was before.

[wf9a5m75]

Thank you for creating a project that reproduce the issue. That's a contribution. I will check it tomorrow.

[wf9a5m75]

Okay, I fixed the issue. Sharing the project that reproduce an issue is good way to figure out the root of the problem.
Just adding some code in somewhere is not enough, because I can not verify the way is good or not.

Reinstall the plugin from the multiple_maps branch, you can touch the overlay without firing the plugin_touch event. Please try it, and let me know the new code works for you.

[aMUSiC]

I confirm that the fix works perfectly, both in the sample project and in my production project.

I understand that an actual project is much more helpful both to display the bug and help you fix it. Now that I have one in place, it will be easy for me too to update it to demonstrate any potential bugs I stumble upon in the future.

Thank you for fixing this. Unless you'd like more information from me, you can close this ticket.