Ion content vertical scroll disabled after loading map

Ionic Framework ionic-v3
1

I’ve got an ion-list on my homepage that has enough items in it to require vertical scroll. The scroll works fine.

From the homepage, I’ve got a nav push to a map page where I’m loading a Google map into a containing div. The map works fine.

When navigating back from the map page to the homepage, the scroll on the homepage content stops working. Note: It’s fine in the browser ($ionic serve), but disabled for some reason on iOS (real device running iOS 13). Other gestures like tap still work on the homepage, it’s just scroll that’s frozen/disabled.

For testing, I removed the map div on the map page and tested navigating from home > map > home which gave no problem (the scroll worked fine). Scroll is only disabled after loading the map into the map page and then going back.

I can imagine why normal page scroll might be disabled when loading a map into a page (as you want to scroll the map with your finger and not the page), but I can’t imagine why, when leaving the page and destroying the map, scroll is disabled on a different page/globally.

The same behaviour occurs even if I use setRoot rather than push on the navController, so even if I re-load the entire homepage after leaving the map page, the scroll is still disabled.

It may also be worth noting I’m using Capacitor and Cordova is not enabled in the project.

Has anyone seen this before? Any idea what might be causing the problem?

Thanks

2

So it appears that after loading a Google Map into a <div id="map></div> any page (using the v3 JS SDK, not native), scrolling of the ion-content is then disabled on the rest of the app, whether you set nav root, push or pop to another page - scroll stops working.

Does anyone who has worked with Ionic 3 and Google Maps (or any other maps) have an idea why this is?

Thanks

3

I’ve since tried disabling scrollZoom on the map in the hope that if I stop the map from capturing the scroll event to prevent zooming, the normal scroll gesture on mobile will continue working. Unfortunately it doesn’t solve this.

Is there anyone out there who can help by building a Capacitor enabled v3 app and testing on an iOS device - I can provide a minimum code repo for testing. Anyone??

4

I would try to see what happens to the scroll gesture, which part eats it

Listening on scroll event on ion-content and if not use a dom eventlistener putside of angular stuff

I cant test on ios devices myself so obly thinking with you

5

Btw, have u considered using cordova plugin for the suspicious part? Capacitor allows u to combine

6

If anyone else is interested in following this, I’ve filed a bug report here and there is a test project repo available: https://github.com/ionic-team/capacitor/issues/2046

7

HI, I’m new to the forum but I have a similar if not the same problem. Whenever I click on a marker it loads an Ion modal using the modal controller. When I click on the backdrop to dismiss the modal and drag the map while the backdrop animation is still ongoing, I lock the ion-content’s vertical scroll. Is there anyone that encountered the same issue? Ionic 8 and @capacitor/google-maps 6.0.0-rc.0