ionic 5.5.2 angular + openlayers: Controls vanish on ios native + emulator (cordova)

[Siedlerchr]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.5.2

Current behavior:
After rendering on native ios the OpenLayers controls vanish. This only happens on ios native (iPad and emulator), safari on mac does not have this problem. The Last working ionic version was 5.4.1.

Expected behavior:
The controls stay on top of the map

Steps to reproduce:

Run the app using ionic cordova run ios in the emulator on an ipad or on a real device
switch between Test 1 and Map
See the controls flashing and vanish when switching between the pages.

Related code:

A sample application via GitHub
https://github.com/Siedlerchr/ionic-ol-bugtest

Other information:
A Colleague and I debugged this and discovered that this might be somehow related to zIndex ordering, The controls are rendere, but somehow behind the map.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1002.1
   @angular-devkit/schematics    : 10.2.1
   @angular/cli                  : 10.2.1
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res : 0.15.2
   native-run  : 1.3.0

System:

   ios-deploy : 1.11.0
   ios-sim    : 8.0.2
   NodeJS     : v12.18.3 (/usr/local/bin/node)
   npm        : 6.14.11
   OS         : macOS Big Sur
   Xcode      : Xcode 12.3 Build version 12C33

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Siedlerchr]

Sorry, I accidentally put the repo link inside the comment: See here for the repo https://github.com/Siedlerchr/ionic-ol-bugtest

[liamdebeasi]

Thanks. This is probably due to d77a9d5. This change triggers an optimization in WebKit that improves scrolling performance. The behavior you are seeing is a quirk with how WebKit renders layers in non-body scrollable elements.

Can you try setting z-index: -1; on the map layer? You will need to add this to global.scss rather than your component css since Angular will try and scope it:

app-map .ol-unselectable.ol-layers {
  z-index: -1 !important;
}

Alternatively, you could disable the scrolling optimization on just that component if you know you don't need ion-content to be scrollable. If you wanted to do that, you could put the following css in home.page.scss:

ion-content::part(scroll) {
  z-index: unset;
}

Can you try one of these approaches and let me know if it resolves the issue?

[Siedlerchr]

@liamdebeasi Wohoo! Your first fix helped, works both in emulator and on a real iPad device

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.