Window.print() only displays all content on 2nd call

Question

In my web page I have a button to print selected contents using the window.print() JavaScript method. My function is as simple as:

function HTMLtoPDF()
{
    window.print();
}

The button is called with onclick="HTMLtoPDF()". The oddity here is that the first call to window.print() prints all content defined within the @media print type (in my print.css file - please check below for its contents) except for 2 images I'm using as background for my checkboxes. However, when I call window.print() for the 2nd time everything is displayed correctly. This behavior happens both by clicking the button or calling the window.print() function on Chrome's console: only on the 2nd call everything is correctly displayed.

However, if I use Chrome's Dev Tools -> More tools -> Rendering -> Emulate CSS media -> print option, everything is displayed correctly right away.

Here are the PDFs generated for the 1st and 2nd call:

1. First print (incorrect)

2. Second print (correct)

I thought the problem could be that window.print() executes too early and something was being discarded (because the rendering was too quick), so I performed several tests by adding setTimeout() up to 5000ms (while calling window.print()), with no luck.

Anyone has a hint on this? If needed, of course I can post some of the JS code involved, just trying not to populate the question too much, right from the beginning.

print.css (italic denotes the 2 lines where the background images are being applied):

@media print
{
    * {
        -webkit-transition: none !important;
        transition: none !important;
      }

    .example-screen
    {
       display: none;
    }

    #ConteudoCentral
    {
        height: 99%!important;
    }

    .example-print
    {
        display: block;   
    } 

    div.topo
    {
        display: fixed;
        margin-right:20px;
        top: 0;
        margin-bottom: 20px!important
    }

    div.rodape
    {
        margin-right:20px;
        bottom: 0;
        margin-top: 20px!important;
        display: fixed;
    }

    @page :left
    {
        margin: 1cm;
    }

    @page :right
    {
        margin: 1cm;
    }

    @page :top
    {
        margin: 1cm;
    }

    @page :bottom
    {
        margin: 1cm;
    }

    br
    {
        display: block;
        margin: 0px!important;
        content: " ";
        line-height: 0px!important;
    }

    #tituloOrdemServico
    {
        text-transform: uppercase;
        margin-top: 0px;
    }

    .tipoDominio_pdf
    {
        text-transform: uppercase;
        overflow-wrap: break-word;
        color: #04378b!important;
        font-size: 11px;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        -webkit-print-color-adjust: exact;
    }

    .periodo_pdf
    {
        text-transform: lowercase;
        overflow-wrap: break-word;
        color: #04378b!important;
        font-size: 10px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
    }

    .dadosGerais_pdf
    {
        text-transform: uppercase;
        overflow-wrap: break-word;
        color: #000!important;
        font-size: 9px;
        border-bottom: 1px #000 solid;
        display: block;
        line-height: 9px;
        margin-top: 9px;
        padding-left: 5px;
        padding-right: 5px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        padding-bottom: 2px;
    }

    .detalhes_dadosGerais_pdf
    {
        overflow-wrap:
        break-word;
        color: #000!important;
        font-size: 9px;
        border-bottom: 1px #000 solid;
        display: block;
        line-height: 9px;
        margin-top: 9px;
        padding-left: 5px;
        padding-right: 5px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        padding-bottom: 2px;
    }

    .bold_pdf
    {
        font-weight: bold;
    }

    .quebraSpan
    {
        display: grid;
    }

    .barra_azul
    {
        background: #04378b!important;
        color: #fff!important;
        margin-left: 0px;
        margin-right: 0px;
        line-height: 17px;
        border-bottom: none;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        font-weight: bold;
    }

    .subTitulos_pdf
    {
        margin-top: 10px;margin-left: 10px;font-size: 9px;
    }

    .textRight15
    {
        padding-right: 15px;
        text-align: right;
    }

    .tituloChecklist
    {
        vertical-align: top;
    }

    .checkbox_text_pdf
    {
        font-size: 9px;
        line-height: initial;
    }

    .checkbox_black
    {
        white-space: normal;
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 0;
        /*margin-top: 5%;*/
        vertical-align: middle;
        *background: url(../resources/imgs/ic_check_box_outline_24px_black.svg) left top no-repeat !important;*
        background-size: 50% 50% !important;
        cursor: pointer;
        float: left;
    }

    .selected_black
    {
        *background: url(../resources/imgs/ic_check_box_24px_black.svg) left top no-repeat !important;*
        background-size: 50% 50% !important;
    }

    .lineHeightNormal
    {
        line-height: normal;
    }

    .marginleft20
    {
        margin-left: 20px;
    }

    .marginleft10
    {
        margin-left: 10px;
    }

    .marginleft30
    {
        margin-left: 30px!important;
    }

    .marginleft0
    {
        margin-left: 0px;
    }

    .paddingright30
    {
        padding-right: 30px!important;
    }

    .marginbottom15
    {
        margin-bottom: 15px;
    }

    .empty_row
    {
        /*margin-top: 18px!important;*/
        height: 12px;
    }

    .rodape_pdf
    {
        overflow-wrap: break-word;
        color: #000!important;
        font-size: 8px;
        line-height: 8px;
        margin-top: 8px;
        padding-left: 5px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
    }

    .col_1_3
    {
        width: 200px;
    }

    .col_2_3
    {
        width: 500px;
        margin-left: 15px;
    }

    .col_3_3
    {
        width: 715px;
    }

    .linha
    {
        margin-top: 9px;
        display: flex;
    }
}

Answer 1

The solution was relatively simple: replacing the CSS background property with <img> tags containing the same images. E.g.:

This CSS goes away

.selected_black
{
    background: url(../resources/imgs/ic_check_box_24px_black.svg) left top no-repeat !important;
    background-size: 50% 50% !important;
}

..and is replaced by HTML + CSS

<img src="/resources/imgs/ic_check_box_24px_black.svg">

plus CSS:

.selected_black img
{
    width: 50%;
    height: 50%;
    vertical-align: top;
}

However, I still don't know why my original approach wasn't working for the 1st call.

Answer 2

Probably you could cache those images and hide them in your print button page rather using a timeout

Images not appearing in print preview - Chrome