NumberFlow becomes invisible when using background-clip: text

[maximilianniemann]

NumberFlow version

[email protected]

Framework version

[email protected] & [email protected]

Describe the bug and the steps to reproduce it

Description

When attempting to style the NumberFlow element using background-clip: text (to apply a gradient to the text), the element becomes invisible. We would like to use NumberFlow in combination with text gradients, but this issue prevents that styling option.

Steps to Reproduce

1. Add a NumberFlow element to the page.
2. Apply a gradient background to the element.
3. Set background-clip: text and color: transparent for the text gradient effect.
4. Observe the NumberFlow element becoming invisible.

Expected Behavior

The NumberFlow text should display properly with the gradient applied, maintaining visibility.

Actual Behavior

The NumberFlow text becomes invisible when background-clip: text is used.

Environment

• Browser: Chrome, Safari
• Operating System: macOS

Minimal reproduction (greatly appreciated)

https://codesandbox.io/p/sandbox/gjqkpj

[barvian]

Hi, thanks for filing. This has come up before; it seems to be a browser limitation. Unfortunately I can't work around it 🫤