I have the Ticker component wrapped with some div (Container), and I'm detecting onHover actions with mouseover and mouseout event listeners. If someone hovers over the Ticker, I want it to stop moving.
Everything works perfectly fine on various browsers, but on Safari I'm getting this weird bug - after repetitive hovering/not hovering element, Ticker component increases its speed (and sometimes it's displaying white space before the next element).
I managed to solve that issue with removing move prop and then defining speed value based on hovered state (speed={isHovered ? 0 : 5}) but it's far from perfect. I wonder if there are some other ways to fix that issue?
I have the
Ticker
component wrapped with some div (Container
), and I'm detecting onHover actions withmouseover
andmouseout
event listeners. If someone hovers over the Ticker, I want it to stop moving.Everything works perfectly fine on various browsers, but on Safari I'm getting this weird bug - after repetitive hovering/not hovering element, Ticker component increases its speed (and sometimes it's displaying white space before the next element).
Code sample:
I managed to solve that issue with removing
move
prop and then defining speed value based on hovered state (speed={isHovered ? 0 : 5}
) but it's far from perfect. I wonder if there are some other ways to fix that issue?