I have used the trick described in https://github.com/ionic-team/ionic/issues/15036 and used in How to center a popover horizontally on iOS? to center the popovers in my app(especially when the virtual keyboards pop up). After updating from ionic 4 and angular 7 to ionic 5 and angular 9 the solution is not working anymore.
I have debugged in chrome and it seems like the “transform: translate(-50%, -50%) !important;” part is not considered anymore. It still works on other elements but not on the popover.
Ionic info:
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.901.4
@angular-devkit/schematics : 9.1.4
@angular/cli : 9.1.4
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 14 other plugins)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
I would appreciate any help!
You can see the transform not applying on the right screenshot which is the updated app version in chrome. The left screenshot shows the old version where everything is fine.
In Firefox even the new version works. Somehow it is a chrome specific error. Since chrome is used as a browser on the mobile device. The problem is present there.
I have made a minimal working example here: https://github.com/timKraeuter/popover-transform-ionic5