Printing PDF with phantom js - @page rule not working

Question

We're using the phantom JS to print out PDF from web pages (intranet site). My issue is not with the whole styling but just with the @page rule. None of the styles within the @page rule are applied.

Do you have any idea what this could be?

@page {
    size: auto;
    padding: 0 !important;
    margin: 10mm !important;
    page-break-before: avoid;
    border: none !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    overflow: hidden !important;
    box-sizing: border-box !important;

    @top-left-corner {
        content: ""; /* has to be specified! */
        background-color: rgba(42, 201, 80, 0.220);
        border-bottom: solid green;
    }
}

Answer 1

As the shown image describe the browser support for the @page.

Answer 2

I can't see a problem with your CSS, but perhaps it's contained within a stylesheet that is set to media screen already, in which case it will be ignored.

When you import your stylesheet make sure you use media type print or all

<link href="main.css" media="all" rel="stylesheet" />