Break global Angular app styles in Firefox when ngx scrollbar becomes visible

[korwin80]

Reproduction

https://stackblitz.com/edit/ngx-scrollbar-ruvhwk

ngx-scrollbar-ruvhwk.zip

Actual Behavior

In Firefox, when the ngx scrollbar becomes visible, it loads https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js.
Once loaded, this breaks the global styles of the Angular application.
stackblitz.com - Doesn't reproduce this because it blocks Scroll-timeline.js from loading.
I am attaching an example in a zip archive, it must be run locally.
In addition, downloading scroll-timeline.js from the Internet will not allow to use ngx-scrollbar in intranet projects.

Environment

• Angular: 18.0.5
• ngx-scrollbar: 15.0.1
• Browser(s): Firefox 127.0.2
• Operating System: Windows 10

[MurhafSousli]

The problem is with the polyfill, I think this is related flackr/scroll-timeline#261

I opened an issue flackr/scroll-timeline#273

[Sweeneri]

Hi! I am currently experiencing this bug. Is there any short-term solution to fix this? Thanks

[MurhafSousli]

Yes, actually here is a fixed version of the polyfill. use the following URL to load the polyfill.

URL: https://cdn.statically.io/gist/MurhafSousli/c852b6a672069396953f06ddd4b64620/raw/7089126915c424e85fba611d179fc5687b8743a0/scroll-timeline.js

bootstrapApplication(App, {
  providers: [
    provideScrollbarPolyfill('PATH_TO_POLYFILL')
  ]
});

[MurhafSousli]

Here is a fixed stackblitz that works in firefox, I will ship the modified polyfill in the next version.