Not working on firefox

[seanparko]

I've tried even running the demos provided in firefox, but none of them seem to work. I just want to use the CSS rule animation-timeline: scroll();, not any JS stuff.
The instructions dont seem to really explain how to install the polyfill either. Do I just have to add the script tag to my html head?

[seanparko]

*It works with inline styles ONLY. This video explains how to get css animations working correctly with this polyfill in firefox: https://www.youtube.com/watch?v=UmzFk68Bwdk. Still not sure why the demos don't work. Also for anyone else out there you need to type animation-timeline: scroll(block root);. The block root does something, not sure though.

[tatof]

Doesnt work in firefox with inline styles AND breaks @font-face for some reason

        <script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

        <style>
            .ani-fadescale-left{
                    opacity: 0;
                    transform: translate(-30px,0);
                    animation: ani-fadescale-left linear forwards;
                    animation-timeline: view();
                    animation-range-start: cover;
                    animation-range-end: 500px;
            }

            @keyframes ani-fadescale-left{
                from {transform: translate(-30px,0); opacity: 0;}
                to {transform: translate(0px,0); opacity: 1;}
            }
        </style>

[bramus]

Do I just have to add the script tag to my html head?

Yes.

*It works with inline styles ONLY

This used to be the case but no longer is since early February, when #242 to merged.
See https://flackr.github.io/scroll-timeline/demo/view-timeline-external-css/ for a demo.

Doesnt work in firefox with inline styles AND breaks @font-face for some reason

Testing https://flackr.github.io/scroll-timeline/demo/view-timeline/ in Firefox tells me the polyfill works fine.

The culprit seems to be that @font-face rule you mention. The used CSS parser can’t handle it. This is linked to #80, #133, and #100 which are all about limitations of the used CSS Parser.

[tatof]

Oke, is it possible to use Polyfill only on one specific .css file?
Its impossible to remove @font-face or any other Media Query

[bramus]

See #248 for that.

[seanparko]

*It works with inline styles ONLY

This used to be the case but no longer is since early February, when #242 to merged. See https://flackr.github.io/scroll-timeline/demo/view-timeline-external-css/ for a demo.

Okay, I think there must of been a problem with how I installed the git locally. When I go to the page on the github it seems to work, just not locally. Cheers.

[bramus]

Are you using Firefox Nightly by any chance? They have a half-working implementation enabled in Nightly, so the polyfill doesn’t kick in there as Firefox claims support. Be sure to test in Firefox Stable.

When testing locally, be sure to build the project first.

[seanparko]

Just to confirm at this point all I have to do is just add the script to the head of my document, nothing else?

[Antonytm]

Doesn't work for me as well.
Next.js: Script was added to the tag.

[bramus]

Next.js: Script was added to the tag.

That is a problem caused by using Next.js. See #240 for that.

[seanparko]

Are you using Firefox Nightly by any chance? They have a half-working implementation enabled in Nightly, so the polyfill doesn’t kick in there as Firefox claims support. Be sure to test in Firefox Stable.

When testing locally, be sure to build the project first.

Okay, I made sure I'm using base firefox. I have just added the following to the top of the head of my html, still can't get it to work. Do I need to change my CSS or something? Is there something else I need to do? I have only been able to get it to work by putting the styles inline on my html page.
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

[bramus]

At this point, sharing tour CSS and/or a repro is necessary to debug this.

I have only been able to get it to work by putting the styles inline on my html page.

Do you see any console errors? For example, external stylesheets can't be processed in case of CORS.

[seanparko]

At this point, sharing tour CSS and/or a repro is necessary to debug this.

I have only been able to get it to work by putting the styles inline on my html page.

Do you see any console errors? For example, external stylesheets can't be processed in case of CORS.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
t scroll-timeline-css.js:56
At scroll-timeline-css.js:16.
Could this be from an adblock or something? Like I can get it to work with inline styles though.
Anyway, I cut a part from a site I was working on out to give you a repo. Its suppose to be a navbar, that fades in and then eventually locks to a fixed position when you reach the second page. It's a very dirty implementation, don't judge please. It works alright on chrome, just not firefox. Hope this helps.

https://github.com/seanparko/boilerplate_site

[seanparko]

*Just to add, I can confirm all of the demos work, just so long as their code is inline as well. Its strange, as the external css demo works when its hosted the github, but locally I can't get the demo to work (And yes I made sure to update the script src to the github instead of the local address).

[flackr]

What do you mean by "locally"? Are you loading directly from a file rather than a webserver? For external CSS files the polyfill needs to be able to fetch the CSS in order for the polyfill to read them. The browser does not allow this from file:/// origins as general access would allow reading other files from your system.

You will have to run your demo through a webserver, e.g.

python3 -m http.server

I confirmed that it looks like it's working in firefox for me using the above to serve the website and load it from http://localhost:8000/navbar.html

[seanparko]

What do you mean by "locally"? Are you loading directly from a file rather than a webserver? For external CSS files the polyfill needs to be able to fetch the CSS in order for the polyfill to read them. The browser does not allow this from file:/// origins as general access would allow reading other files from your system.

You will have to run your demo through a webserver, e.g.

python3 -m http.server

I confirmed that it looks like it's working in firefox for me using the above to serve the website and load it from http://localhost:8000/navbar.html

Okay, I tried running it on my WAMP server, and the code appears to work now. However, I'm still having trouble with it getting to work with certain features. If you go back to my github repo, I have updated the code so that it contains something that I cannot get to work. When you scroll down, the SVG in the html file is suppose to grow with respect to the scroll position. Again, it works perfectly on chrome but not on firefox. It actually appears to break the scroll animations entirely, with on refresh giving me different results. Thanks for your help so far.

https://github.com/seanparko/boilerplate_site

[seanparko]

I just said screw it and decided to push my site to the public. I've now noticed that the console log is absolutely filled with errors regarding the script on firefox. Here is an example: "
ncaught TypeError: Animation.currentTime setter: Value being assigned is not a finite floating-point value.
ct proxy-animation.js:481
lt proxy-animation.js:461
st proxy-animation.js:403
et proxy-animation.js:180
mt proxy-animation.js:657
mt proxy-animation.js:655
xe scroll-timeline-base.js:44
o scroll-timeline-base.js:311
proxy-animation.js:481
"

[seanparko]

@flackr @bramus Bump. Have any of you been able to take a look at that site I uploaded and recreate the issue? Could it be due to the use of relative units?

[jpike88]

Doesnt work in firefox with inline styles AND breaks @font-face for some reason

This is an insanely annoying bug to have to track down, I've wasted a lot of time for just pretty scrollbars.

I also was getting the Value being assigned is not a finite floating-point value error.

I also don't appreciate a 3rd party lib deciding to fetch a js file from a GitHub hosted resource... even when bundled for production.

I've decided to fork ngx-scrollbar and ditch the polyfill code.

[jpike88]

Just found out about the NG_SCROLLBAR_POLYFILL token, I used that instead and hosted the polyfill file locally.

[jpike88]

Nope, that still breaks Firefox's font-face loading functionality for some reason.

[jpike88]

So after reading up, the CSS parser is mangling stuff and causing Firefox to break any font-face implementations? That is a pretty huge caveat, I guess it's back to native scrollbars and thinking about an alternative library.

[seanparko]

For me the polyfill its pretty much useless. Has too many limitations (Must use non-relative units, can't have font-face, etc). Would be nice if the readme of the git was updated so many afternoons weren't wasted trying to get it to work. Guess we'll have to wait till its implemented into all browsers.

By the way, depending on what you're trying to do there's always GSAP (Which is annoying, because you have to include a whole library for a few features).

[MurhafSousli]

Just found out about the NG_SCROLLBAR_POLYFILL token, I used that instead and hosted the polyfill file locally.

@jpike88 In v14.1.1 the polyfill is shipped with ngx-scrollbar, but it still load it directly from github by default, to load it locally, read here https://github.com/MurhafSousli/ngx-scrollbar/wiki/Scroll-timeline-polyfill