Rotating Text does not work with gradient text CSS, only in Chrome.

[Toshimichi0915]

I have the following source code.

import RotatingText from "@/components/RotatingText";

export default function Home() {
  return (
    <div className="border inline-block m-10">
      <RotatingText
        texts={["Hello", "こんにちは", "你好"]}
        className="inline-block text-transparent bg-linear-to-r bg-clip-text from-green-400 to-blue-500"
      />
      <p className="inline-block text-transparent bg-linear-to-r bg-clip-text from-green-400 to-blue-500">Hello</p>
    </div>
  );
}

When this page is viewed via Firefox, everything works perfectly. However, when viewed via Chrome, Rotating Text seems to be invisible.

Minimal reproducible repo: https://github.com/Toshimichi0915/react-bits-debug

Please help me debug this bug. Thanks!