ion-spinner paused attribute no longer works on ios

[philipbrack]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x ] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [ x] bug report [ ] feature request

Current behavior: ion-spinner paused="{{isPaused}}" attribute is no longer pausing / resuming the spinner animation. I do not see the issue in chrome but only when I build for ios.

Expected behavior: when this.isPaused is set to false the animation should resume.

Steps to reproduce: No special steps

Related code:

  togglePause() {
    this.isPaused = !this.isPaused;
  }

<ion-content padding>
  <ion-spinner name="crescent" paused="{{isPaused}}"></ion-spinner>
  <button (click)="togglePause()"> TOGGLE SPINNER ANIMATION</button>
</ion-content>

Other information: Platform is IOS 11.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

/Users/pbrack/dev/temp/myapp:ionic info

cli packages: (/Users/pbrack/.nvm/versions/node/v8.5.0/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    ios-deploy : 1.9.2
    ios-sim    : 5.0.8
    Node       : v8.5.0
    npm        : 5.3.0
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235`

[kensodemann]

Hello! Thank you for opening an issue with us!

I duplicated your issue in a sample project. It turns out that if I use UIWebView it works fine but if I switch to WKWebView it does not. Uploaded the project here: https://github.com/kensodemann/test-spinner

There are two important commits. One shows this working with UIWebView. The other only includes the installation of WKWebView and shows this not working.

All testing was done on an iPhone 6 simulator running iOS 11 and iOS 10.1, and on a physical iPhone 7 running iOS 11.

Thank you for using Ionic

[philipbrack]

Thanks for going to the trouble of including more information. Since WKWebView appears to be the new default it corroborates your findings, however I do not see the cordova plugin for either when

> cordova plugin ls
✔ Running command - done!
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-email-composer 0.8.9 "EmailComposer"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-globalization 1.0.7 "Globalization"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

so I am not sure how to verify I am using WKWebView

[manucorporat]

Can you verify the CSS:

ion-spinner.spinner-paused svg {
  animation-play-state: paused;
}

is being applied?

[kensodemann]

@philipbrack - if you were using it, you would see it. Like this:

> cordova plugin ls
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.4-dev "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-wkwebview-engine 1.1.6 "Cordova WKWebView Engine"
ionic-plugin-keyboard 2.2.1 "Keyboard"

It is entirely possible you have a different issue with this. Can you post sample code via GitHub that demonstrates your issue?

[kensodemann]

@manucorporat - when I created the sample app I posted, I verified that the spinner paused class was being applied to the ion-spinner element and that animation-play-state was set to paused on the svg.

I verified this both with the commit using UIWebView where it paused, and WKWebView where it did not pause even though the svg had the animation-play-state: paused style

[philipbrack]

Here is a project showing the issue using UIWebView. Note it is the latest production blank starter project with the home page edited only and I am running in IOS 11 (actual device: Iphone 6). https://github.com/philipbrack/ionic_12950

[kensodemann]

I tried your project on iOS 10.1, 10.3.1, and 11.0 I also tried it on the latest version of following browsers: chrome, firefox, opera, safari

It works on: chrome, firefox, opera, iOS 10.x It does not work on: safari (version 11), iOS 11

In all cases, the styles looked like they were being handled properly

I am guessing that there is some sort of a bug in the latest version of safari or that some alternate style needs to be used. I wonder if there is some sort of workaround required. Hmmmm....

[philipbrack]

I discovered a work around which may help someone identify the root cause. My workaround is to trigger the setting of the isPaused = true in a digest after ngAfterViewInit. There is something about animation-play-state never being set to running.

[philipbrack]

FYI this issue has not been fixed with 3.7.1

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!