Distance between boxes is not always homogeneous

[valerioleo]

Hey @AndreasFaust, thanks for the great library, it does exactly what we were looking for.

At the same time, I have noticed that the boxes don't always have the same distance one to another as you can see from the following image. It is very subtle, but the first gutter is slightly bigger than the second:

To reproduce, I have created a little sandbox that might help you find the issue: https://codesandbox.io/s/eloquent-driscoll-o47el

Hopefully, it helps. Thanks again for the great work.

[luliandro]

hi, I'm having the same issue.

did you manage to get it fixed?

[tayteboss]

Hey, I have the same issue as well...

Any fixes on this?

[matthewfamularo]

Same issue.

[dowrow]

@luliandro @tayteboss @matthewfamularo @valerioleo I believe this is caused by the component measuring the width of the content before the fonts are loaded at first render, or at least that was causing me this same issue.

My quick fix was to wrap a visibility observer around the Ticker like this:

import Ticker from 'react-ticker';
import { useInView } from 'react-intersection-observer';

export default function Marquee({ children }) {
    const { ref, inView } = useInView({
        threshold: 0,
    });

    return <>
        <div ref={ref} className="container">
            {
                inView && <Ticker>
                    {
                        () => (children)
                    }
                </Ticker>
            }
        </div>
    </>;
}