Skip to content

bug: increasing size of ion-spinner results in blurry animation on iOSΒ #18115

Closed
@asgeo1

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions