bug: Failed to set the 'currentTime' property on 'Animation': The provided double value is non-finite

[EyadIT94]

Bug Report

Ionic version: [x] 5.x

Current behavior:

I'm getting error in return back in Ionic 5 the error shows below:

animation-0084d55f.js:587 Uncaught TypeError: Failed to set the 'currentTime' property on 'Animation': The provided double value is non-finite.

Expected behavior:

It should to return back to the previous page without hanging in Google Chrome 80

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.9 (C:\Users\eyad1\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.900.2
   @angular-devkit/schematics    : 9.0.2
   @angular/cli                  : 9.0.2
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)

Utility:

   cordova-res : 0.9.0
   native-run  : 0.3.0

System:

   NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.12.1
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[EyadIT94]

First page

HTML:

<ion-header>
  <ion-toolbar>
    <ion-title>More</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-list class="listsettings">
    <ion-item [routerLink]="['profile']">
      <ion-icon name="person" slot="start" mode="ios"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-item>
    <ion-item [routerLink]="['/notifications']">
      <ion-icon name="chatbubbles" slot="start" mode="ios"></ion-icon>
      <ion-label>Notifications</ion-label>
    </ion-item>
    <ion-item [routerLink]="['settings']">
      <ion-icon name="settings" slot="start" mode="ios"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-item>
    <ion-item [routerLink]="['settings']">
      <ion-icon name="create" slot="start" mode="ios"></ion-icon>
      <ion-label>Feedback</ion-label>
    </ion-item>
    <ion-item [routerLink]="['settings']">
      <ion-icon name="filing" slot="start" mode="ios"></ion-icon>
      <ion-label>Join Us</ion-label>
    </ion-item>
    <ion-item [routerLink]="['administration']">
      <ion-icon name="construct" slot="start" mode="ios"></ion-icon>
      <ion-label>Administration</ion-label>
    </ion-item>
    <ion-item [routerLink]="['settings']">
      <ion-icon name="information-circle" slot="start" mode="ios"></ion-icon>
      <ion-label>About Us</ion-label>
    </ion-item>
    <!-- <ion-item [routerLink]="['settings']">
      <ion-icon name="log-out" slot="start" mode="ios"></ion-icon>
      <ion-label>Logout</ion-label>
    </ion-item> -->
  </ion-list>

</ion-content>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-more',
  templateUrl: './more.page.html',
  styleUrls: ['./more.page.scss'],
})
export class MorePage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Second Page

HTML:

<ion-header>
  <ion-toolbar>
    <ion-title>settings</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})
export class SettingsPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Also I'm getting an error while compile that is: [ng] ERROR in @ViewChild options must be an object literal

[liamdebeasi]

Thanks for the follow up. Can you please provide a full GitHub repo with steps to reproduce? I am unable to reproduce the issue using the code snippet provided.

[EyadIT94]

I send you the invite, the steps: you will see the welcome page make skip, then go to more in tabs, then choose settings, then swipe back like returning back in the iPhone.

In this event the error will occurs

[liamdebeasi]

Thanks for the follow up. Are you testing this on a particular device like an iPhone or Android device?

[EyadIT94]

I'm testing it in Web Browser

[liamdebeasi]

Thanks for the follow up. When loading up your app I get a white screen and cannot proceed. Can you double check the repo and make sure it is working properly?

[EyadIT94]

This issue I get it after update to Ionic 5

[liamdebeasi]

I understand that you are getting this with Ionic 5; however, I am unable to run your app to reproduce the issue. Can you please double check that the app you provided is working properly?

[AntonioGallo]

Also in my app the same problem occurs in the browser with (ionic serve --lab) with 'ios platform'. I believe it is a history problem. If I enter my app and from the side menu I have a link with routerDirection = "forward" which opens a page (Page 2): Example Page 2:

' " Ion-toolbar '  ion-buttons slot = "start" '    ion-back-button defaultHref = "/ home"> </ion-back-button  '  Ion-buttons

If I don't put defaultHref = "/ home" and swipe ios to return back the error appears in the console.

[lincolnthree]

FWIW, I just hit this issue as well. I don't have a repro yet, but here is the stack trace and linked code:

Uncaught TypeError: Failed to set the 'currentTime' property on 'Animation': The provided double value is non-finite.
(anonymous) @ animation-0084d55f.js:597
setAnimationStep @ animation-0084d55f.js:596
progressEnd @ animation-0084d55f.js:715
(anonymous) @ animation-0084d55f.js:690
progressEnd @ animation-0084d55f.js:689
(anonymous) @ ion-app_8-ios.entry.js:786
onEnd @ swipe-back-c7acdfde.js:34
pointerUp @ index-c38df685.js:533
handleTouchEnd @ index-c38df685.js:277

animation-0084d55f.js:597

    var setAnimationStep = function (step) {
        step = Math.min(Math.max(step, 0), 0.9999);
        if (supportsWebAnimations) {
            webAnimations.forEach(function (animation) {
===>      animation.currentTime = animation.effect.getComputedTiming().delay + (getDuration() * step);
                animation.pause();
            });
        }
        else {
            var animationDuration_1 = "-" + getDuration() * step + "ms";
            elements.forEach(function (element) {
                if (_keyframes.length > 0) {
                    setStyleProperty(element, 'animation-delay', animationDuration_1);
                    setStyleProperty(element, 'animation-play-state', 'paused');
                }
            });
        }
    };

animation-0084d55f.js:715

        else if (playTo === 1) {
            if (supportsWebAnimations) {
                update();
===>         setAnimationStep(step);
            }
            else {
                forceDelayValue = (step * getDuration()) * -1;
                update(false, false);
            }
        }

animation-0084d55f.js:690

    var progressEnd = function (playTo, step, dur) {
        shouldForceLinearEasing = false;
        childAnimations.forEach(function (animation) {
            animation.progressEnd(playTo, step, dur);
        });
        if (dur !== undefined) {
            forceDurationValue = dur;
        }

ion-app_8-ios.entry.js:786

                                if (!shouldComplete) {
                                    _this.ani.easing('cubic-bezier(1, 0, 0.68, 0.28)');
                                    newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], step)[0];
                                }
                                else {
                                    newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], step)[0];
                                }
===>                           _this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
                            }
                        });

index-c38df685.js:533

    var pointerUp = function (ev) {
        var tmpHasCaptured = hasCapturedPan;
        var tmpHasFiredStart = hasFiredStart;
        reset();
        if (!tmpHasFiredStart) {
            return;
        }
        calcGestureData(detail, ev);
        // Try to capture press
        if (tmpHasCaptured) {
            if (onEnd) {
===>       onEnd(detail);
            }
            return;
        }
        // Not captured any event
        if (notCaptured) {
            notCaptured(detail);
        }
    };

[PurpleEdge2214]

I've created a very simple repo here...

https://github.com/PurpleEdge2214/GWB-ionic5-animations-bug

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

Angular: npm i @ionic/angular@5.1.0-dev.202002181528.45d03ba

React: npm i @ionic/react@5.1.0-dev.202002181528.45d03ba

[lincolnthree]

That resolves it for me! You're still the best @liamdebeasi

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20540 and will be available in an upcoming release of Ionic Framework.

[PurpleEdge2214]

Thank you, that stops the error!

On a related matter: I noticed that the swipeback to close the NewPage doesn't work when the site is loaded from the root folder. i.e. it doesn't work unless the site is refreshed (CtrlF5) from the /tabs/tab1 page.

This is evident in the test repo.

Anyone know why this is the case?

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