sysreptor icon indicating copy to clipboard operation
sysreptor copied to clipboard

Valid 'background-clip' Value not Recognized

Open d0ntcopythatfloppy opened this issue 10 months ago • 2 comments

Hello Syslifters Team,

There appears to be an issue with a specific CSS property in SysReptor Version 2025.12.

I'm trying to create text with a color gradient by setting the 'background-clip' CSS property to 'text' as described below: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

SysReptor does not recognize 'text' as a valid value for 'background-clip': Warning Message - CSS Property Ignored

Here is example HTML/CSS creating the desired effect in a sandbox: Working Text with Color Gradient

.text-red-blue-gradient { font-size: 80px; background: linear-gradient(to right, red, blue); background-clip: text; color: transparent; }

As pictured above, this CSS should create a linear gradient background image, and then 'clip' the background to only cast the colors onto the text.

Because the 'background-clip' property is ignored when the value is set to 'text', SysReptor renders the entire background making the text invisible:

d0ntcopythatfloppy avatar Feb 06 '25 15:02 d0ntcopythatfloppy

Hi, we use the WeasyPrint library for rendering HTML+CSS to PDF. WeasyPrint has not implemented CSS Backgrounds Module Level 4 yet (where background-clip: text is defined), only CSS Backgrounds and Borders Module Level 3.

Please open an issue at the WeasyPrint repository.

MWedl avatar Feb 10 '25 06:02 MWedl

The best alternative seems to be embedding an SVG, if you have a static text.

aronmolnar avatar Feb 10 '25 13:02 aronmolnar

Tracked in https://github.com/Kozea/WeasyPrint/issues/2378

aronmolnar avatar Jul 22 '25 05:07 aronmolnar