Ionic-framework: bug: increasing size of ion-spinner results in blurry animation on iOS

[asgeo1]

Bug Report

Ionic version:
[x] 4.2

Current behavior:
I am using the LoadingController in @ionic/angular to show a loading animation with spinner:

    this.loadingController.create({
      cssClass: 'loading-container',
      spinner: 'circles',
      translucent: true
    })

It's quite small on the screen, so I'm trying to increase the size of it using CSS.

Sadly there don't appear to be any good ways to increase the size of <ion-spinner> with Ionic v4.

Using CSS transform: scale(5); will scale it up. However, because of the CSS animations, it ends up looking blurry on iOS. (android is fine though)

From what I understand, this is a long standing bug in mobile Safari, that occurs when scale is applied to a CSS animation. (if you google for this, you'll get a tonne of links)

Note that in Ionic v1, sizing an <ion-spinner> wasn't an issue, since it was possible to size it by just doing this:

      .spinner svg {
        width: 15rem;
        height: 15rem;
      }

Which avoids the transform: scale Safari bug.

Unfortunately this method doesn't work in Ionic v4, and it results in the <ion-spinner> looking very odd if tried.

End result is that there's no good way to increase the size of <ion-spinner>, and I'm kind of forced to use the transform: scale approach and just have it look all blurry on iOS.

Expected behavior:
It should be possible to size a <ion-spinner> without making it blurry

Steps to reproduce:
As above

Related code:
As above

Other information:
None

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/asgeo1/.node/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 20 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/asgeo1/Development/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 5.0.6
   NodeJS            : v10.10.0 (/usr/local/bin/node)
   npm               : 6.8.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[brandyscarney]

Thanks for the issue! The spinner in Ionic 4 is using width and height to customize its size. This seems to work fine on the Android default spinner. I can confirm that there seems to be an issue with the following spinners though: circles, dots, and bubbles. Here is a Codepen where I reproduced this: https://codepen.io/brandyscarney/pen/xNqVxw

[bashoogzaad]

Would be great if the resizing of the spinner with width and height would be documented. This was the only place where I could find it.