Marquee starts then stops on Safari until mouseover

[pdugan20]

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

[pdugan20]

Also seeing an issue on Firefox on iOS where the marquee wont play unless you physically press the area around the marquee. Seems like the hover state interaction is somehow being inverted?

[pdugan20]

After a bit of debugging, if I pass in direction='right' that seems to at least restart the marquee on safari.

[justin-chu]

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

[justin-chu]

Can't seem to reproduce this on Safari 14.0.3. What version are you running? It seems that there are issues with the animation-play-state property in CSS with Safari 11.

[pdugan20]

Saw this happening on Safari 14.1.1 and on iOS 14.6. Happy to try and put together a code sample for you if that's helpful. This is the PR that fixed it for me: https://github.com/hikearound/hikearound-web/commit/d56330b288a8d93389229d7b0a8b2311529a7fb7

[justin-chu]

A code sample would be perfect, thanks a lot!