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

[timKraeuter]

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 #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

[liamdebeasi]

Thanks for the issue. The popover seems to be centered properly in your repo. Can you double check to make sure you included the correct code?

[timKraeuter]

I'm sorry I have not phrased that clearly. The popover should be shifted to the left in chrome as it is in firefox.
Here is a screenshot in firefox where the translate gets applied correctly. This also worked for chrome in ionic 4.

[liamdebeasi]

Hmm maybe I am not fully understanding what the issue is. Using the following code:

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

the popover should be centered horizontally and vertically.

I tried the CSS on a regular div and got the same result: https://codepen.io/liamdebeasi/pen/qBOoKOw

Is the screenshot linked in #21244 (comment) what you expect to see?

[timKraeuter]

I have updated the repo to use your code. Before I just had:
.popover-content { transform: translate(-50%, -50%) !important; }
Which should cause the popover to not be centered.

Now I am using the code you provided. But in chrome, the transform CSS is not applied. As you can see in this screenshot from chrome the popover is not centered:

In firefox, the popover is centered.

[liamdebeasi]

Thanks for the follow up. I was able to reproduce the behavior you are experiencing; however, I am not sure this is an Ionic Framework bug. I tested this in an older version of Ionic 4, and I got the same result as in Ionic 5. This appears to be a browser quirk between Chrome and Firefox.

Can you provide an example of this working in an Ionic 4 application with Chrome?