Serious performance problems in Firefox using examples

[martinbroos]

🐛 Bug Report

When using firefox (tested on mac / windows) the react spring animations become extremely slow and make the complete page no longer useable. At first I thought it was a problem in my code but this also happens when visiting the react spring example page. Works fine in chrome and safari.

To Reproduce

Steps to reproduce the behavior:

Visit https://www.react-spring.io/docs/hooks/examples in Firefox.

Tested with Firefox Quantum 68.0.1 (64-bits) on mac

Expected behavior

Regular framerate

Environment

• react-spring v8.0.25
• react v16.8.x

But as stated this is also happening on the react spring page.

[martinbroos]

After some more research it looks like it only get's slow in firefox when mapping over transitions / trails inside the render function. For example my app uses 2 useTransitions to create a slider, this will get slow. One transition slides the content, and the other will fade out the background video.

    const slideVideoTransitions = useTransition(
        currentSlideIndex,
        item => item,
        videoTransformationProperties // uses opacity
    );

const slideContentTransitions = useTransition(
        currentSlideIndex,
        item => item,
        transitionProperties // uses translate3d
    );

            {slideVideoTransitions.map(({ item, props, key }) => {
                const currentSpotlight = spotlights[item];

                return (
                    <animated.div
                        key={key}
                        style={props}
                    >
...video component
                    </animated.div>
                );
            })}
            {slideContentTransitions.map(({ item, props, key }) => {
                const currentSpotlight = spotlights[item];
                return (
                    <animated.div
                        key={key}
                        style={props}
                        className="hero__slide"
                    >
... slide component
                    </animated.div>
                );
            })}

When using springs that will only set props inside the render this has no impact on the performance.

When looking at the react-spring examples:

Slow in firefox: https://codesandbox.io/embed/8zx4ppk01l

Fast in firefox: https://codesandbox.io/embed/rj998k4vmm https://codesandbox.io/embed/01yl7knw70

https://codesandbox.io/embed/vqpqx5vrl0

The last one does map over transitions so this is where I get lost, but hopefully this will give some more context.

[martinbroos]

When looking at the Goo Blob demo it renders pretty fast when making your window small but using it on fullscreen or retina display it get's slow.

In my app the speed also improves when using a smaller viewport. Could it be that animating translate and rendering video in firefox has performance issues on large screens?

[joshuaellis]

Doesn't GSAP have performance issues with Firefox and it's down to the browser not the library?

[joshuaellis]

I'm not sure this is something wrong with react-spring after reviewing again, three years later. No one else reported this either so I think we can consider this closed :)