[Bug]: After opening ionic modal on iOS the map will turn blanc until app restart.

[fonodi]

Capacitor Version

Latest Dependencies:

@capacitor/cli: 6.1.0
@capacitor/core: 6.1.0
@capacitor/android: 6.1.0
@capacitor/ios: 6.1.0

Installed Dependencies:

@capacitor/cli: 6.1.0
@capacitor/core: 6.1.0
@capacitor/android: 6.1.0
@capacitor/ios: 6.1.0

[success] iOS looking great! 👌
[success] Android looking great! 👌

Other API Details

npm version 10.2.4
node version v21.6.0
pod version 1.15.2

"dependencies": {
    "@capacitor/android": "^6.1.0",
    "@capacitor/app": "6.0.0",
    "@capacitor/core": "6.1.0",
    "@capacitor/google-maps": "^5.4.1",
    "@capacitor/haptics": "6.0.0",
    "@capacitor/ios": "^6.1.0",
    "@capacitor/keyboard": "6.0.1",
    "@capacitor/status-bar": "6.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "6.1.0",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "sass": "^1.77.6",
    "terser": "^5.4.0",
    "typescript": "^5.1.6",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.0.22"
  }

Platforms Affected

• iOS
• Android
• Web

Current Behavior

When an ion-modal opens on iOS while the map is active, the map will be unusable until app restart.

Expected Behavior

The map should be visible and usable after an ion-modal opens or closes.

Project Reproduction

https://github.com/Garmagon/bug-capacitor-google-maps-modal

Additional Information

After installing a fresh ionic app with ionic start, select vue and sidemenu.

Install capacitor google maps like stated in the docs.

When creating a map, the map will appear properly and everything works, but when opening an ion-modal component, the map underneath will turn blank with a horizontal overflow that is scrollable. After that point the only way to fix it is app restart, but the modals will still not work with the map.

The only solution I found so far is to teleport the map and all the modals out of the project structure into the body, but this will cause a bunch of other problems like elements being under the map or animation issues.

[AE1NS]

Could be the same as this #23