bug: Scroll freezing on all pages after loading (any popular) map

[g-hamilton]

Bug Report

Capacitor Version

npx cap doctor output:

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 1.2.1

@capacitor/core: 1.2.1

@capacitor/android: 1.2.1

@capacitor/ios: 1.2.1

Installed Dependencies:

@capacitor/cli 1.2.1

@capacitor/android 1.2.1

@capacitor/core 1.2.1

@capacitor/ios 1.2.1

[success] Android looking great! 👌 Found 0 Capacitor plugins for ios: [success] iOS looking great! 👌

Note: I've installed android on my local project (that's the only difference to the linked repo project).

Affected Platform(s)

• [x] Android
• [x] iOS
• [ ] Electron
• [ ] Web

Current Behavior

Test with the project linked below. Navigate to any page with scrollable ion-content (eg. a page with an ion-list in the ion-content) after viewing a map and the scroll gesture behaviour on mobile is frozen everywhere in the app.

Expected Behavior

Normal scroll gesture allows vertical scrolling of all pages after viewing a map.

Sample Code or Sample Application Repo

https://github.com/g-hamilton/map

Reproduction Steps

Clone the repo npm install npx cap add android (if testing on android) ionic build npx cap copy npx cap open (ios or android) See the list on the homepage can scroll vertically as expected Tap the icon top right of homepage to navigate to a map page View the map as expected Tap back to return to homepage. Note: Scroll is now frozen.

Other Technical Details

Using Ionic 3 framework with Capacitor enabled. Not tested with Ionic 4.

Both Android and iOS affected by this (tested on real devices). Browser not affected (only tested using ionic serve where the behaviour is normal).

I've tested this using absolutely 'standard' installation methods for both the Google Maps JS SDK v3 and Mapbox-GL JS SDK. The scroll bug occurs in both cases so it seems it's not the mapping SDK. The demo project is using Mapbox. Mapbox does listen to a scroll event to allow scrollZoom. I have tried disabling this and it makes no difference. So it seems this bug will affect every Capacitor enabled Ionic v3 app using a popular mapping SDK such as Google or Mapbox?!

I have tested the exact same implementation without using Capacitor (and using Cordova) and there is no problem. It seems as though the issue is with the Capacitor webView perhaps? Perhaps it's an issue with the way webView is implemented in Capacitor and some eventListeners are not being deregistered?

I prefer Capacitor because I've had no problems with the plugins and I prefer the build flow so I don't want to switch to Cordova.

I've tried using modal and popover for the map rather than page - no difference.

Tried lazy loading and different nav methods like setRoot, pop and push to navigate to and from the map - no difference.

npm --version output:

node --version output:

pod --version output (iOS issues only):

Other Information

Both Google and Mapbox confirm the maps SDKs are installed and working correctly with no issues.

[g-hamilton]

Some extra info that may help:

Inspecting the event listeners through Crome inspector, I notice that when the map page is loaded (and thus, the map itself is loaded), the ionScroll event listener is removed from the <ion-content> element. Because the behaviour is normal when using $ionic serve, I can see that on navigating back to the home page, the ionScroll listener is re-attached. However, I'm not sure this is the case on mobile. If I add (ionScroll)="console.log('Scrolling!')" to the <ion-content> element on the home page, it certainly isn't firing on mobile after loading a map.

In addition, I tested calling a scrollToBottom() method manually (using a button) on the home page <ion-content> after loading a map and returning to the home page. Because (click) events do still work on the <ion-content>, that did work and the homepage did scroll to the bottom. So it appears scroll itself is working but the touch gesture to detect scrolling is definitely not.

I've thought about trying to manually re-attach the ionScroll listener to the content but I can't see any available methods on the content to achieve this.

[bryplano]

Can you give this a shot in Ionic 4? A lot has changed (esp. related to scroll events) since the last major v3 releases, so I wouldn't be surprised if this is fixed in v4.

[rafaneri]

@bryplano I have the same problem in Ionic 6.

[AgustinCocconi]

Any updates on this? having same issue on Ionic 5. In my case it happens after dragging on some custom overlay I made for the map. For example, an "x" button to close it. I've noticed when you press hold on the overlay the map fires continuos dispatchEvents with focus:false atribute and when you drag your finger inside the map it changes to focus:true but without scrolling the map. After leaving the page, horizontal scroll wont work on the entire app and after some navigation, vertical scroll will break aswell. This only happens when dragging on the overlay in the map page