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.
renderLoadingState = () => (
<Marquee play={false} gradient={false} pauseOnHover>
<LoadingCard />
<LoadingCard />
<LoadingCard />
<LoadingCard />
<LoadingCard />
</Marquee>
);
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>
);
};