Colour rendering messed up? #716

randohinn · 2023-03-17T08:48:57Z

randohinn
Mar 17, 2023

I have a simple pdf template rendered from a view, for some reason, the colours are all wrong. This text is supposed to be white...

  <div style="position: fixed; z-index: 99; color: white; font-weight: 500; font-size: 1rem;  top: 40vh; left: 22vw;">
         {{ $data['date'] }}
    </div>

Full view:

<html>
<head>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Spartan:400,500,600,700&amp;display=swap" rel="stylesheet">
    <style type="text/css">
        body {
            color: white !important;
        }
    </style>
</head>
<body style="font-family: 'Spartan',sans-serif;">
    <img src="bg..svg" style="width: 100vw; height: 100vh; position: fixed; z-index: 10; right:0;">
    <div style="position: fixed; z-index: 99; color: black; font-weight: 500; font-size: 1.5rem;  top: 33vh; left: 22vw;">
         {{ $data['location'] }}
    </div>
      <div style="position: fixed; z-index: 99; color: white; font-weight: 500; font-size: 1rem;  top: 40vh; left: 22vw;">
         {{ $data['date'] }}
    </div>
</body>
</html>

I do use the helping facade from VerumConsilium\Browsershot\Facades\PDF to render, but I don't think that should make any difference,,,

return PDF::loadView('tenant.pdf.advertisement', ['data' => $data])->ignoreHttpsErrors()->format('A4')->transparentBackground()->margins(0, 0, 0, 0)->inline('Ad.pdf');

brunomart97 · 2023-03-17T11:03:45Z

brunomart97
Mar 17, 2023

@randohinn
It's probably the background image. You can drag the svg file to a new tab within your code editor, and copy the entire svg code, and replace the <img> tag with the entire svg code.

Example:

<html>
<head>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Spartan:400,500,600,700&amp;display=swap" rel="stylesheet">
    <style type="text/css">
        body {
            color: white !important;
        }
    </style>
</head>
<body style="font-family: 'Spartan',sans-serif;">
    //Add your svg code here
    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="104" r="32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><path d="M208,104c0,72-80,128-80,128S48,176,48,104a80,80,0,0,1,160,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
    
    <div style="position: fixed; z-index: 99; color: black; font-weight: 500; font-size: 1.5rem;  top: 33vh; left: 22vw;">
         {{ $data['location'] }}
    </div>
      <div style="position: fixed; z-index: 99; color: white; font-weight: 500; font-size: 1rem;  top: 40vh; left: 22vw;">
         {{ $data['date'] }}
    </div>
</body>
</html>

0 replies

marotiisti · 2025-02-06T11:14:37Z

marotiisti
Feb 6, 2025

A possible solution is to add this, to the style tag:

html {
  -webkit-print-color-adjust: exact;
}

1 reply

bworks-john Oct 28, 2025

Can confirm this resolves similar issues issues with header element (h1-h6) rendering and elements with background color applied (background: #aabbcc; and background: rgb(255, 255, 255);).

Minimal example for reproduction purposes:
Rendered output in browser, no print-color-adjust applied:

<div class="card">
	<div class="card-title"><h1>Premium</h1></div>
	<div class="card-content">
		Lorem ipsum.
	</div>
</div></div>

.grid .card {
    border: 4px solid #eaa43c;
    border-radius: 12px;
}
.grid .card .card-title {
    background: #eea43c;
}
.hero-cards-page .content .grid .card .card-title h1 {
    text-align: center;
    color: #fff;
}

Rendered output from browsershot, no print-color-adjust applied:

Rendered output from browsershot, print-color-adjust applied:

It would be good to know the underlying logic behind WebKit changing / altering / in some instances entirely removing background and foreground color configuration from the rendered output, but specifying -webkit-print-color-adjust does resolve the issue.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Colour rendering messed up? #716

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Colour rendering messed up? #716

Uh oh!

randohinn Mar 17, 2023

Replies: 2 comments · 1 reply

Uh oh!

brunomart97 Mar 17, 2023

Uh oh!

marotiisti Feb 6, 2025

Uh oh!

bworks-john Oct 28, 2025

randohinn
Mar 17, 2023

Replies: 2 comments 1 reply

brunomart97
Mar 17, 2023

marotiisti
Feb 6, 2025