Position: fixed on CSS media print seems to duplicate content on print?
<p>Given the div:</p>

<pre><code>    ...
    &lt;div id='section-to-print'&gt;CONT
        /*Content*/
    &lt;/div&gt;
    ...
</code></pre>

<p>And the CSS</p>

<pre><code>    @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;
      } 
    }
</code></pre>

<p>Whenever I print (e.g. ctrl+ p)it shows only whatever is in the /<em>content</em>/ region (as expected). However the content is duplicated. If I emulate the print media in chrome it shows correctly. Also, I noticed if I remove/change the <code>position: fixed;</code> in the CSS makes it work "properly" (not duplicating), but at the wrong position.</p>

<p>I couldn't find any similar problems on google and honestly I never ever saw this behavior before.</p>

<p>Does anybody know why is it duplicating the content when I try to print?
Also, I tried on more than 1 computer, same behavior on all.</p>