KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.78k stars 214 forks source link

Invalid keyframe value warning #581

Closed elringus closed 10 months ago

elringus commented 10 months ago

After an update to the latest version of the react package I've started getting following warnings:

110391d71136843ed38fb79c509ffecc

af682f818939a5c181096b78bdb22e68

— I guess it should be an easy fix by just guarding against nan, but if you need a repro, I'll try to make one.

KingSora commented 10 months ago

@Elringus Thanks for the report!

I'll create an fix, but out of curiosity I would like to know why the NaN value is created (probably division by 0 or something) but I can't trigger it in my tests.

elringus commented 10 months ago

Here's how I use the plugin:

export const Scrollable = (props: Props) => {
    const ref = useRef<HTMLDivElement>(null);
    const { children, scrollX, scrollY, container, className } = props;

    const [initialize, getInstance] = useOverlayScrollbars({
        options: {
            overflow: {
                x: scrollX == null ? "scroll" : scrollX ? "scroll" : "hidden",
                y: scrollY == null ? "scroll" : scrollY ? "scroll" : "hidden"
            },
            scrollbars: { clickScroll: true }
        },
        defer: false
    });

    useEffect(() => {
        if (ref.current != null) {
            if (container == null) initialize(ref.current);
            else initialize({ target: ref.current, elements: { viewport: container } });
        }
        return () => getInstance()?.destroy();
    }, [container, initialize, getInstance]);

    return <div {...props}
                ref={ref}
                children={children}
                className={c(css.scrollable, className)}
                data-overlayscrollbars=""/>;
};

I've noticed the warning is only triggered when I use the <Scrollable> for a virtual list (via virtuoso) and only when return () => getInstance()?.destroy(); is present. When the destructor is removed, the warning is gone (but also styling breaks, not sure why).

elringus commented 10 months ago

Can confirm https://github.com/KingSora/OverlayScrollbars/commit/edc677f55c618eba2f9331a67b0e320112d02517 fixes the warnings.

I've tried making a minimal repro with just OverlayScrollbars and Virtuoso, but it didn't reproduce. It's probably more complicated.

KingSora commented 10 months ago

@Elringus great! I'll publish a new version soon

KingSora commented 10 months ago

v2.4.4 is released and should fix this issue :)