ERROR TypeError: Animation.currentTime setter: Value being assigned is not a finite floating-point value. in firefox

[anupamsharmae]

Error on Firefox, I was just updating my angular application to 18.

ERROR TypeError: Animation.currentTime setter: Value being assigned is not a finite floating-point value. ct scroll-timeline.js:1 mt scroll-timeline.js:1 xe scroll-timeline.js:1 Ie scroll-timeline.js:1 trace bugsnag.js:2565 Angular 21 node_modules main.js:3235 Ie scroll-timeline.js:1 r scroll-timeline.js:1 Angular 6 Re scroll-timeline.js:1 ScrollTimeline scroll-timeline.js:1 startPolyfill ngx-scrollbar.mjs:729 _ThumbAdapter ngx-scrollbar.mjs:696 Angular 32 node_modules main.js:3235 set Angular initPolyfill ngx-scrollbar.mjs:564

Query : Old browser support

Thanks creating this package, its really helpful and wanted to know about this package that does it support for old browsers of Safari, firefox and others.

Reproduction

Check on firefox browser, issue: https://stackblitz.com/edit/ngx-scrollbar

Steps to reproduce:

1. Just copy this link in firefox browser (v-127 I am using) and open the console to see error.

Expected Behavior

What behavior were you expecting to see? After the update to 15.0.4, the issue should not come.

Actual Behavior

What behavior did you actually see?

Source map error: Error: request failed with status 404 Resource URL: https://ngxscrollbar-jje4--4200--70dbe416.local-corp.webcontainer.io/@fs/home/projects/ngx-scrollbar/.angular/cache/18.0.2/vite/deps/chunk-VXQSL6GA.js?v=9b429ea0 Source Map URL: chunk-VXQSL6GA.js.map

Environment

• Angular: 18
• ngx-scrollbar: 15.0.4
• Browser(s): Firefox Version 127.0.2 (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 22.04.4 LTS (64 bit)

[MurhafSousli]

The stackblitz has an issue with loading external scripts, therefore, only stackblitz env need to load the polyfill script locally, here is a working example https://stackblitz.com/edit/ngx-scrollbar-gcawvy

Regarding supporting old browsers. this plugin rely on new CSS feature called scroll-timeline , see browser compatibility.

It is considered ok for the browsers that support it, other browsers will use a polyfill, until the feature is available.

[anupamsharmae]

I appreciate your response, and thanks for guiding me for the above.

But in my project, have deleted my node_module and pacakge-lock.json file and npm cache clean done. Again done npm i. Nothing happens same error coming in my console of firefox.

Secondly

I want the suggestion. I have a scenario having a color-picker inside the offcanvas, actually color-picker is clipped due to css property used in

.ng-scroll-content {
  ...
  contain: content // which actually posses the correct behavior here.
  ...
}

In my project I have override the style like this. Please guide me, is this I have done is correct or can you suggest the better way to approach this scenario.

/* 
   Actually inside the library `ng-scroll-content` have the css-property `contain: content` 
   which actually means there and also posses correct behaviour.
   So work around for the color-picker to show dynamically outside of sidebar, this hack is introduce.
*/

ng-scrollbar .ng-scroll-content {
  position: relative;
  contain: style !important;
}

Please check the demo app provided link below, global_style.css file and main.html file. just copy the link and run https://stackblitz.com/edit/stackblitz-starters-kuxf9r?file=src%2Fglobal_styles.css

Thanks & regards

[MurhafSousli]

@anupamsharmae I am not sure why you still get an error in FireFox even after loading the polyfill locally! could it be that you're using an old version of FireFox?

Regarding the color-picker, overriding contain property is fine!

[WebTechnolog]

I also get this error using the latest Firefox and Safari. In some cases there's this error, in others when the scrollbars appear the whole application flickers and some parts of if become broken (GoJS diagram for instance, it starts giving multiple errors). In Chrome everything in fine.

I tried the polyfill fix from this issue https://github.com/MurhafSousli/ngx-scrollbar/issues/615 but it didn't help. At first I mistyped the polyfill file path and it just did not load. The errors were gone, and even the scrollbars appeared, but they were not moving (I guess that's what the polyfill is for).

[markus-javier]

in this part of the polyfill, t is sometimes NaN throwing the error above.

[cesaric]

Confirming @markus-javier edit if (isNaN(t)) t = 0; fixes the snippet used in the library (v15.1 is broke too): https://cdn.statically.io/gist/MurhafSousli/c852b6a672069396953f06ddd4b64620/raw/7089126915c424e85fba611d179fc5687b8743a0/scroll-timeline.js

Would be great to get this edit added to make it usable again in Firefox.

[MurhafSousli]

Try this one https://cdn.statically.io/gist/MurhafSousli/c852b6a672069396953f06ddd4b64620/raw/ef55db72e2abb7bc002ed79f4ad4cf408bfdb72f/scroll-timeline-lite.js

[WebTechnolog]

@MurhafSousli scroll-timeline-lite.js fixes the issue, thanks.

But why is it not included by default? I have to use it via provideScrollbarPolyfill.

[cesaric]

Should we update const scrollTimelinePolyfillUrl?: https://github.com/MurhafSousli/ngx-scrollbar/blob/master/projects/ngx-scrollbar/src/lib/utils/scrollbar-manager.ts

[MurhafSousli]

You're right, will fix it.

[xylplm]

I also encountered the same problem. I have upgraded to Angular 18 and am using the latest version ngx-scrollbar@15.1.2 There is no problem in the latest version of Edge browser, but this error is also reported in the not particularly new Chrome 113 version. ngx-scrollbar.mjs:471 [NgScrollbar]: Error loading ScrollTimeline script: Event {isTrusted: true, type: 'error', target: script, currentTarget: script, eventPhase: 2, …} isTrusted : true bubbles : false cancelBubble : false cancelable : false composed : false currentTarget : null defaultPrevented : false eventPhase : 0 returnValue : true srcElement : script target : script timeStamp : 22367.40000000596 type : "error"