AndreasFaust / react-ticker

React Ticker is a lightweight, performant React component, that moves text, images and videos infinitely like a newsticker.
https://andreasfaust.github.io/react-ticker/
288 stars 50 forks source link

[BUG] Ticker speeds up only on Safari after hovering multiple times on parent conatiner #59

Open kstoklosa opened 2 years ago

kstoklosa commented 2 years ago

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).

Code sample:

    <Container ref={tickerRef}>
      <Ticker move={!isHovered} speed={5}>
        {() => (
          <div>
            {items.map((item) => {
              return <div key={item.id}>{item.name}</div>;
            })}
          </div>
        )}
      </Ticker>
    </Container>

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?