[BUG]: HyperText does not show on Mobile

[cybercoder-naj]

Environment

System:
OS: Linux 6.12 EndeavourOS
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 7.96 GB / 15.29 GB
Container: Yes
Shell: 3.7.1 - /bin/fish
Binaries:
Node: 20.18.3 - /usr/bin/node
npm: 11.1.0 - /usr/bin/npm
pnpm: 10.4.0 - /usr/bin/pnpm
bun: 1.2.2 - ~/.bun/bin/bun

Describe the bug

HyperText component works properly on Desktop browsers, but not on mobile browsers. They just flash once and disappear.

Reproduction

Copy the component code and use it in a project. View the development in the mobile browser. Production reproduction

Additional context

No response

Screenshots

No response

Logs

Additional information

• Would you be willing to fix this bug?

[kalix127]

Could you send me the exact code you used? I tried reproducing the problem in one of my projects, but it works perfectly.

Edit: By the way, I'm able to view the text on your website by selecting it.

[cybercoder-naj]

Oh interesting observation, i didn't realise it is hidden. Here is the copied component and here is the usage.

[kalix127]

The problem is the "text-transparent" class on the parent:

@rahul-vashishtha this can be closed.

[cybercoder-naj]

text-transparent is the culprit but it doesn't solve my issue. I require the text transparent so the gradient background is shown (note that i'm using bg-clip-text which clips the background to the shape of the text and text-transparent actually reveals the color.). It works on desktop but not on mobile.

[kalix127]

I'll check better tomorrow but in any case I don't think this is a problem with the component itself