The Trap of Web Calendar Printing: window.print() Ignores Off-Screen Elements
I built a calendar printing feature for the web. PDF and PNG downloads worked perfectly, but when hitting the browser print button, image positions weren’t reflected at all. Same data, so why different results? Structure: Preview and Hidden Export Target The calendar print page had this structure: +-- Visible Area ----------------------------+ | [Settings Panel] [Preview Area] | | - Date range Calendar preview | | - Theme/Color | | - Image position slider | +--------------------------------------------+ +-- Hidden Export Target --------------------+ | <div class="fixed -left-[9999px]"> | <- off-screen | <PrintableCalendar ... /> | | </div> | +--------------------------------------------+ The preview is a scaled-down thumbnail, while the actual export calendar is rendered at full size off-screen (-left-[9999px]). PDF/PNG capture this hidden element. ...