CSS background-clip properties not displayed correctly

[dudenhot]

In the current version, a text with the following css does only show the background image but not the text (Microsoft Edge
Version 105.0.1343.50):

<div class="title">TITLE</div>

.title {    
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(0deg, #45819D, #7FB0C5);
    font-weight: bold;
    font-size: 25px;
}

print window with version 1.0.10 (it works almost correctly, except the line above the text)

print window with current verion, only background image displayed:

[MatthewHerbst]

Hi, thanks for reporting. This appears to be an upstream bug in Chrome (Edge uses Chromium). If you try printing the page with just ctrl+p it also shows the same bug. I'll see if I can track something down for it

[MatthewHerbst]

Example of this being completely unrelated to react-to-print: https://2c46s7.csb.app/

[MatthewHerbst]

A related but slightly different issue (improper printing on the downloaded PDF): https://bugs.chromium.org/p/chromium/issues/detail?id=883026

[MatthewHerbst]

This appears to be an issue on Safari as well. I wonder if the above issue is more related than we think. Are you on a Windows machine or MacOS?

[dudenhot]

I work on a Windows machine.

[MatthewHerbst]

I can reproduce on Firefox as well 😢

[MatthewHerbst]

My guess is your best bet is to just find a different way to do it with CSS, since it seems no browser supports background-clip while printing unfortunately

[MatthewHerbst]

I created an issue against Chromium to track this: https://bugs.chromium.org/p/chromium/issues/detail?id=1369475

[dudenhot]

My guess is your best bet is to just find a different way to do it with CSS, since it seems no browser supports background-clip while printing unfortunately

Ok, but I'm wondering why it works with the older version

[MatthewHerbst]

I'm wondering why it works with the older version

Older versions of this library used to add the -webkit-print-color-adjust: exact; style:

https://github.com/gregnb/react-to-print/blob/7529a676401780c8eeaf1a8de351e70c0487b92d/src/index.js#L104

If you add that to the CodeSanbox I posted you can see that it prints semi-correctly (with the line)

[dudenhot]

I'm wondering why it works with the older version

Older versions of this library used to add the -webkit-print-color-adjust: exact; style:

https://github.com/gregnb/react-to-print/blob/7529a676401780c8eeaf1a8de351e70c0487b92d/src/index.js#L104

If you add that to the CodeSanbox I posted you can see that it prints semi-correctly (with the line)

Ok, thanks