Consider the following div element:
...
<div id='section-to-print'>CONT
/*Content*/
</div>
...
Accompanied by this CSS code snippet:
@media print {
* {
-webkit-transition: none !important;
transition: none !important;
}
body * {
visibility: hidden;
}
#section-to-print {
position: fixed;
top: 0;
left: 0;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
}
When attempting to print (e.g. ctrl+ p), only the content area is displayed as expected, but it appears duplicated. Emulating print media in Chrome shows the correct output. Interestingly, removing or changing the position: fixed; property in the CSS resolves the duplication issue, albeit at an incorrect position.
This unusual behavior puzzles me as I could not find any similar cases online and have never encountered it before. Has anyone experienced content duplication when printing? I have replicated the issue on multiple computers with the same result.