Description
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