[bug]: /docs/components/animated-gradient-text

[freedomidea]

Describe the bug
animated gradient text not show insafari on ios

Smartphone (please complete the following information):

• Device: iPhone6s plus
• OS: 15.8.3
• Browser safari

Additional context

i ask ai(cursor) it's fix code to this

`
import { cn } from "@/lib/utils";
import { ComponentPropsWithoutRef } from "react";

export interface AnimatedGradientTextProps
extends ComponentPropsWithoutRef<"div"> {
speed?: number;
colorFrom?: string;
colorTo?: string;
}

export function AnimatedGradientText({
children,
className,
speed = 1,
colorFrom = "#ffaa40",
colorTo = "#9c40ff",
...props
}: AnimatedGradientTextProps) {
return (
<span
style={{
background: linear-gradient(to right, ${colorFrom}, ${colorTo}, ${colorFrom}),
backgroundSize: ${speed * 300}% 100%,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
animation: gradient ${speed * 3}s linear infinite,
}}
className={cn("inline", className)}
{...props}
>
{children}

);
}
`

by chaning
1.change css variable to inline styles
2.add vendor prefix (Webkit-) for safari on iOS
3. use linear-gradient ,not use Tailwind classes
4. use animation in style

when changes it's work!

[itsarghyadas]

Sorry for the late response, but I’m closing this for now as it should work. In case you run into any issues again, feel free to open an issue or PR. Thanks!