bug: ion-spinner moving when position absolute (possible regression)

[peterpeterparker]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
When setting a position absolute to the ion-spinner won't hold in place as it used to but is now moving slowly to the right.

Expected behavior:
Spinner stays in place even with absolute positioning

Possible regression:
Ionic v.4.7.1 -> all good, spinner stays in place
Ionic v4.8.1 -> spinner is moving

Related code:

<ion-content>
    <ion-spinner color="primary"></ion-spinner>
</ion-content>

ion-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Other information:

I observed the behavior in an Angular app as well in a Stencil PWA, therefore I would say it's a core issue.

Screenshot:

[peterpeterparker]

Workaround: encapsulating the ion-spinner in a div and positioning it in the center instead of the component itself

[brandyscarney]

Thanks for the issue! I was able to reproduce this in core as well: https://codepen.io/brandyscarney/pen/VwZRBro

[averyrousseau]

This has (finally!) been resolved, via #24643. The fix will be available in a future release of Ionic 👍 It turns out that this was exclusive to the circular type spinner, and was triggered by adding transform, rather than position: absolute.

[peterpeterparker]

Super cool! Thanks @amandaesmith3

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