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.

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