[macOS] gradient (e.g. linear-gradient) as background-image doesn't render, unless you add `print-color-adjust: exact` (but transparent areas still render as a solid color)
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: w.richert, Unassigned)
Details
Attachments
(4 files, 1 obsolete file)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0
Steps to reproduce:
I have a web page created by Claude that uses
background-image: repeating-linear-gradient( transparent, transparent 27px, #d0d0d0 27px, #d0d0d0 28px );
for horizontal lines on the page.
Actual results:
When printing it, the whole page is black.
Expected results:
The web page should be white with just a few horizontal grey lines on it.
|
||
Comment 1•8 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•8 months ago
•
|
||
Can you share a loadable testcase that reproduces the issue for you? I suspect there might be more going on / more factors involved, beyond just that one line of CSS.
Also, does it reproduce in Print Preview and in "Save to PDF", or just with a physical printer?
I created a simple testcase using your background-image style, and so far am unable to reproduce. Here's what I used (which painted horizontal gray lines as-expected, in print-preview, printing to a real printer, and printing to our save-to-PDF virtual printer):
<!DOCTYPE html>
<style>
.lines {
border: 5px solid black;
height: 300px;
width: 300px;
background-image: repeating-linear-gradient( transparent, transparent 27px, #d0d0d0 27px, #d0d0d0 28px );
}
</style>
<div class="lines"></div>
|
Reporter | |
Comment 3•8 months ago
|
||
Hi Daniel,
Thanks so much for looking into it! Here is an example HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@page {
size: A4 landscape;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background: white;
width: 297mm;
height: 210mm;
display: flex;
margin: 0 auto;
}
.left-section {
width: 50%;
padding: 15mm;
background: white;
border-right: 2px solid #d0d0d0;
}
.right-section {
width: 50%;
padding: 15mm;
background: #fafafa;
position: relative;
}
.notes-header {
font-size: 16pt;
color: #7f8c8d;
margin-bottom: 10mm;
text-align: center;
font-style: italic;
}
.notes-lines {
width: 100%;
height: calc(100% - 40px);
background-image: repeating-linear-gradient(transparent,
transparent 27px,
#d0d0d0 27px,
#d0d0d0 28px);
}
@media print {
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
</style>
</head>
<body>
<div class="left-section">
<h1>test</h1>
<div class="text-content">
test
</div>
</div>
<div class="right-section">
<div class="notes-header">Notizen</div>
<div class="notes-lines"></div>
</div>
</body>
</html>
|
|
||
Comment 4•8 months ago
|
||
|
|
||
Comment 5•8 months ago
•
|
||
Thanks. That testcase prints just fine for me on Linux (to PDF and to my printer), but I can reproduce specifically on macOS, using save to PDF (and I assume it also reproduces when printing to a real printer from macOS, though I'm not bothering with that, to save ink).
|
|
||
Comment 6•8 months ago
|
||
|
|
||
Comment 7•8 months ago
|
||
|
|
||
Comment 8•8 months ago
|
||
(whoops, reposting to fix a minor typo in testcase 2)
|
|
||
Comment 9•8 months ago
•
|
||
Two observations from printing testcase 2 to PDF (with "print backgrounds" checkbox checked, of course):
(1) by default, the gradient doesn't render at all (top box here)
(2) adding print-color-adjust: exact (bottom box here) makes it show up, but it doesn't work properly for colors that are interpolated with transparent - the original opaque color remains at full brightness. So the resulting PDF just has solid color-bars with no transparent regions.
|
|
||
Updated•8 months ago
|
|
|
||
Comment 10•8 months ago
|
||
I'm using macOS Sequoia 15.7.2, for what it's worth.
Hmm, it looks like this is likely a duplicate of quite old bug 1529152. The reporter's testcase there also has a gradient that's attempting to draw lines, which renders as solid-black.
Description
•