"bg-clip-text" with "bg-gradient" in TailwindCSS not rendering properly in Responsively App

[anupom69]

When using TailwindCSS’s bg-clip-text and bg-gradient utilities, the text gradient effect does not render as expected in the Responsively App browser. Instead, a solid background gradient appears. The issue works correctly in other browsers like Chrome, Edge, and Firefox.

The example is a simple text gradient applied as follows:

<p class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
  Incredible growth this year
</p>

Expected Behavior:
The text should render with a gradient applied, making the text visible as a gradient-filled text with a transparent background (like in other browsers).

Actual Behavior:
In Responsively App, the gradient appears as a solid background rectangle behind the text rather than clipping to the text itself.

Steps to Reproduce:

1. Create a simple HTML file using TailwindCSS with the following example:

   <p class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
     We've achieved incredible growth this year
   </p>

2. Open the file in Responsively App and observe the rendering.
3. Open the same file in Chrome, Firefox, or Edge to compare.

Screenshots:

1. Responsively App (Issue)
   
2. Other Browsers (Expected)
   

Environment Details:

• Responsively App Version: 1.15.0
• OS: Windows 11

Additional Notes:
This issue might be related to how Responsively handles background-clip: text or CSS rendering. It would be great to investigate if the CSS parsing/rendering in Responsively differs from standard browsers.

[SiddhantTripathi1]

`

We've achieved
incredible
growth this year

<style> .gradient-text { background: linear-gradient(to right, #7e5bef, #ff61a6); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; } </style>`

@anupom69
This solution ensures that the gradient is properly applied to the text using the background-clip: text property, which works as expected in most modern browsers, including Chrome, Edge, and Firefox.

It seems like Responsively App might be handling the background-clip: text and mask-image properties differently, which could explain why the text gradient isn't displaying correctly.

Could you investigate whether Responsively App’s rendering engine supports background-clip: text fully, or if there is a setting that affects how it parses and displays this type of CSS?

[SiddhantTripathi1]

We've achieved
incredible
growth this year

<style> .gradient-text { background: linear-gradient(to right, #7e5bef, #ff61a6); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; /* Adjust font size if needed */ } </style>