Text-shadow does not appear in print

Question

I have the following css for headers:

h1 {
    color: white;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

This is the css I use for print:

    @media print {
        h1 {
            -webkit-print-color-adjust:exact;
        }
    }

When I try to print it with Chrome, I only get a blank box.

Answer 1

Here is the solution:

h1 {
  text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;
}

@media print {
  -webkit-filter: drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 -1px 0 #000);
  text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;
}