The ticker animation on safari and web gnome starts slowly and goes back to normal speed when I move the mouse or click on the ticker HTML element.
I'm using tailwind. I have also used pure CSS, and it gives me the same behavior.
Here is the code snippet: (test it on an iPhone or Safari if you have one available with you)
let tickerPosts = [{
id: "1",
title: "test test test test test test"
}, {
id: "2",
title: "test test test test test test test"
}]
const Thingy = props => ( < div className = "relative overflow-hidden bg-qallam-darkBgSecondary dark:bg-qallam-darkBgSecondary text-lg" >
<
div className = "scroll-ticker min-w-fit relative -left-full hover:pause h-11 font-qallam pl-[480px] sm:pl-[668px] md:pl-[892px] lg:pl[1100px] xl:pl-[1600px] whitespace-nowrap" > {
Array.isArray(tickerPosts) &&
tickerPosts.map(({
id,
title
}) => ( <
span key = {
id
}
className = "inline-block whitespace-nowrap px-10 my-2 border-l border-gray-400" >
<
a className = "cursor-pointer text-qallam-white hover:text-gray-300 hover:underline " > {
title
} <
/a> < /
span >
))
} <
/div> < /
div >
);
// Render it
ReactDOM.render( < Thingy / > ,
document.getElementById("react")
);@keyframes move-ticker {
from {
transform: translate(0, 0);
}
to {
transform: translate(100%, 0);
}
}
.scroll-ticker {
animation: move-ticker 15s linear 0s infinite;
}<html dir="rtl">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div id="react" class="bg-purple-400"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>