I am having an issue with trying to create a printable version of a page I have created, where I try to print the page but the background colour disappears. I have tried adding -webkit-print-color-adjust: exact !important;
to the styles but am unable to get the colours to print properly and have been unsuccessful in finding anything related or similar to this issue elsewhere.
I have managed to replicate this in a minimal way below.
POCPage.page
<apex:page>
<apex:includeLightning/>
<head>
<script>
var load = () => {
$Lightning.use('c:POC', () => {
$Lightning.createComponent('c:Coloured_Bar', {}, 'POC', () => {
console.log('Coloured bars created');
});
});
};
</script>
</head>
<body onload="load();">
<div id="POC"></div>
</body>
</apex:page>
POC.app
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="Coloured_Bar" />
</aura:application>
Coloured_Bar.cmp
<aura:component>
<div>
<div class="bar red"></div>
<div class="bar green"></div>
<div class="bar blue"></div>
</div>
</aura:component>
Coloured_Bar.css
.THIS {
-webkit-print-color-adjust: exact !important;
}
.THIS .bar {
width: 100px;
height: 50px;
margin-bottom: 2rem;
border: 1px solid black;
}
.THIS .red {
background: red;
}
.THIS .green {
background: green;
}
.THIS .blue {
background: blue;
}
What this page produces is just something stupid like this:
But when you try to print the page the preview and the actual printed page both display like this:
Is there a known issue in trying to print lightning components or is there something(probably obvious) that I am missing?
Thanks
Edit
Have also tried adding an @media print { .THIS { -webkit-print-color-adjust: exact !important; } }
to the components stylesheet with no luck.
Edit
I have tried this with several browsers just in case this was a chrome issue but it exists across the board with browsers