Items overlapping in Safari NextJS

[jeremylee34]

Any ideas on how to solve this?

basically a duplicate of this issue here which claims that it was resolved in vers. 1.4.0:
#23

however as stated by this coment, the issue seems to persist:
#18 (comment)

Code:

 <Marquee
      speed={30}
      gradient
      gradientColor='#0f0f0f'
      autoFill
      gradientWidth={100}
      className='border-y border-border py-4 h-[60px] overflow-y-hidden animate-blur-in'
    >
      {
        clientLogoNames.map((clientLogoName: string, index: number) => {
          return (
            <div className='opacity-40' key={index}>
              <Image
                src={`/client-logos/${clientLogoName}.png`}
                alt={`${clientLogoName} logo`}
                height={25}
                width={185}
                style={{ height: '25px', width: 'auto', marginRight: 30 }}
              />
            </div>
          )
        })
      }
    </Marquee>

Versions:

"react-fast-marquee": "^1.6.5",
"next": "14.2.17",