Chrome not printing out text shadow #media print - css

Question

I have just modified some td's in a table because I am using a split colored backgrounds and my problem is that when I use a half white and half brown background, the text is not visible unless I set a text-shadow
This is how it looks when printed out on Safari. As you can see the text has a border shadow. This is all set in my code bellow.
border-radius: 5px;
border:1px;
border-color:#000;
-webkit-text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-webkit-print-color-adjust: exact;
font-family: Arial, Helvetica, sans-serif;
font-size:40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #000;
width: 80px;
height: 80px;
vertical-align: -52px;
font-weight: bold;
-webkit-print-color-adjust: exact;
}
When I try and print it out on Chrome, All Works the same a safari apart from the text shadow. Should be read mlk.
Has anyone been faced to this problem before?

Answer 1

Try something like this #media Print text-shadow under Chrome. see snippet below.
.shadow {
border-radius: 5px;
border: 1px;
border-color: #000;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #fff;
width: 80px;
height: 80px;
vertical-align: -22px;
font-weight: bold;
background: linear-gradient(to right, #ffffff 0%,#ffffff 48%,#752201 52%,#752201 100%);
}
/*
this is the part you are interested in
*/
#media print {
#media print and (-webkit-min-device-pixel-ratio: 0) {
.shadow {
-webkit-filter: drop-shadow(-1px 0 black) drop-shadow(0 1px black) drop-shadow(1px 0 black) drop-shadow(0 -1px black);
}
}
/*
additional print specific css styling can go here
*/
}
<div class='shadow'>mlk</div>