Chrome print page prints transparent windows background

asked 2015-09-30 13:13:15 +0800

prometeo
43 ● 1 ● 4

Hello, world!
Issue affecting both Chrome and Firefox.
My software has its printing features, but users sometimes like to print the screen to remember form and UI selections.
I have some content, and an overlapped window over it, with other content.

When printing from browser (ctrl+p, to be clear) the overlapped window is transparent, and all content is printed messed up, even if "print background" is flagged in the browser.
I also tryied "-webkit-print-color-adjust: exact;" on the body CSS, to have printing working at least for Chrome, but it does not work anyway.

Testing on ZK fiddle does not reproduce the problem, because ZK fiddle loads in an iframe the code and it seems that printing ZK content inside an iframe does it.

This is some sample code, it is long just to be sure that some content displays over some other.

If you have any clue, please share! :-)
Thanks everyone!

Gianluca Bonetti
Prometeo Informatica
Italy

<zk>
<style>-webkit-print-color-adjust: exact;</style>
<window vflex="true" hflex="true" mode="embedded" closable="false"
    title="Test Case">
    <grid>
        <rows>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
            <row>
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
                <label value="Label" />
            </row>
        </rows>
    </grid>
</window>
<window mode="overlapped" width="75%" height="75%" position="center"
    title="Test Window">
    <grid sizedByContent="false" oddRowSclass="non-odd">
        <rows>
            <row>
                <label value="Label" />
                <textbox width="100%" />
                <label value="Label" />
                <textbox width="100%" />
                <label value="Label" />
                <textbox width="100%" />
            </row>
            <row>
                <label value="Label" />
                <textbox width="100%" />
                <label value="Label" />
                <textbox width="100%" />
                <label value="Label" />
                <textbox width="100%" />
            </row>
            <row>
                <label value="Label" />
                <textbox width="100%" />
                <label value="Label" />
                <textbox width="100%" />
                <label value="Label" />
                <textbox width="100%" />
            </row>
        </rows>
    </grid>
</window>
</zk>