Marquee starts then stops on Safari until mouseover

The marquee seems to be working fine in Firefox and Chrome, but in Safari specifically when the page loads, it starts animating then immediately stops until there’s a mouseover event.

I’m using one marquee for the loading state:

    renderLoadingState = () => (
        <Marquee play={false} gradient={false} pauseOnHover>
            <LoadingCard />
            <LoadingCard />
            <LoadingCard />
            <LoadingCard />
            <LoadingCard />
        </Marquee>
    );

and another for the actual loaded content:

    renderMarquee = () => {
        const { hikes } = this.state;

        return (
            <Marquee play pauseOnHover gradient={false} speed={30}>
                {hikes.map(
                    (
                        {
                            name,
                            city,
                            state,
                            coverPhoto,
                            review,
                            distance,
                            elevation,
                            difficulty,
                            hid,
                        },
                        index,
                    ) => (
                        <Card
                            name={name}
                            city={city}
                            state={state}
                            coverPhoto={coverPhoto}
                            review={review}
                            distance={distance}
                            elevation={elevation}
                            difficulty={difficulty}
                            hid={hid}
                            key={index}
                        />
                    ),
                )}
            </Marquee>
        );
    };

https://user-images.githubusercontent.com/1837100/122298126-5df53a00-ceca-11eb-8256-4d821b8523e5.mov

[justin-chu]

@pdugan20 thanks for the helpful info, I’ll investigate this.

[justin-chu]

A code sample would be perfect, thanks a lot!