Marquee breaks in the latest Safari after some time Next.js

[ynamite]

Thanks for the great Marquee, it's the only package I've found that allows to change the rate/speed dynamically.

Unfortunately the latest version seems to break in Safari on Mac and also on iOS Safari, after a short period of time, and almost immediately on iOS, but only if the container wrapping the Marquee does not have position fixed. If position is fixed, it works. It works fine in Chrome and Firefox regardless of positioning.
Once the issue arises, you can switch the type of positioning in the dev console from absolute to fixed, to see how the issue immediately remedies itself once position is fixed again. As soon as you switch back to absolute, the issue is back. Strange.

This happens in your demo as well, you just have to change position: fixed to position: absolute.

Not sure what the cause is.

[ynamite]

The problem does not happen with dynamic marquee non React version btw

[tjenkinson]

Hmm yes very strange

[tjenkinson]

I can reproduce it in dynamic-marquee too. Pushed a draft PR here: tjenkinson/dynamic-marquee#752

Deployed at: https://safari-glutch.dynamic-marquee.pages.dev/

It's strange it lines up with when the transition is updated. Also is effected by how big the left margin is, so maybe depends also on how far the element has gone off screen.

When it's broken doing m.setRate(0) which removes the transition fixes it, but starting again with m.setRate(-1) breaks it again.

Feels like a webkit bug :/

https://www.youtube.com/watch?v=9taZOAA42pg

[ynamite]

I agree, it almost certainly is a Webkit bug. I tried a bunch of things on my end but couldn't get it to behave.