bug: CSS transform is not applied to popovers correctly in chrome after updating to ionic 5

Bug Report

Ionic version:

[x] 5.x

Current behavior: I am applying (global.scss)

ion-popover {
    div.popover-content {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

to my Popovers to center them as described in https://github.com/ionic-team/ionic/issues/15036. The CSS transform is not applied in chrome. It is applied in firefox tho. Expected behavior: CSS transform should apply consistently in firefox and chrome. Somehow it is not applying in chrome with ionic 5. In ionic 4 it worked.

Steps to reproduce:

1. Apply transform in the global.scss as shown above.
2. Open a popover.

Related code: Clone the prepared GitHub repository and have a look yourself with chrome and firefox. https://github.com/timKraeuter/popover-transform-ionic5

Other information: I have opened this thread in the forum: https://forum.ionicframework.com/t/popover-centering-not-working-after-ionic-4-to-5-update/189017

But I think it is a bug as it worked in ionic 4 but not in 5.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\TimKräuter\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

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

[timKraeuter]

For future readers. My working solution (Angular/Typescript) with a custom animation is:

public async showPopover() {
    const popover: HTMLIonPopoverElement = await this.popoverCtrl.create({
      component: PopoverTransformedComponent,
      backdropDismiss: true,
      enterAnimation: this.enterAnimation,
  });

    await popover.present();
  }

  private enterAnimation = (baseEl: any) => {
    const backdropAnimation = this.animationCtrl.create()
      .addElement(baseEl.querySelector('ion-backdrop'))
      .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
      .beforeStyles({
        'pointer-events': 'none'
      })
      .afterClearStyles(['pointer-events']);

    // You could alos define the popover-content
    // transform here if you wanted it to
    // still have a scale effect
    const transformAnimation = this.animationCtrl.create()
      .addElement(baseEl.querySelector('.popover-content'))
      .afterStyles( {
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)'
      });

    const wrapperAnimation = this.animationCtrl.create()
    .addElement(baseEl.querySelector('.popover-wrapper'))
    .addElement(baseEl.querySelector('.popover-viewport'))
    .fromTo('opacity', 0.01, 1);

    return this.animationCtrl.create()
      .addElement(baseEl)
      .easing('cubic-bezier(0.36,0.66,0.04,1)')
      .duration(300)
      .addAnimation([backdropAnimation, wrapperAnimation, transformAnimation]);
  }

Thanks @liamdebeasi !

[ionitron-bot[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.