[BUG] [TEMPORARY FIX] - Print container on Chrome + MUI is hiding `Header and Footers` option as default behavior

reisblucas commented 9 months ago

Problem

The Print Container default behavior is to use browser api configs, but it is hiding my Headers and Footers checkbox option on More Settings.

How to reproduce

Here some codesandbox showing the behavior: https://codesandbox.io/p/devbox/print-container-not-showing-headers-footers-checkbox-8cj65z?file=%2Fsrc%2Fpages%2Findex.tsx%3A14%2C64

Steps to reproduce

Doesn't show(acting as default):

Click on Print button on page, it will open the browser print container from chrome
Click on More Settings to expand the options menu
There's no Headers and footers checkbox option, only Background Graphics

How to show:

On CodeSandbox file tree sandbox/src/pages/index.tsx, comment line 33 to 35 and uncomment 37 to 39(PrintContainer components)
Restart dev server on terminal icon 🔄
Repeat the steps 1 and 2 from Doesn't show section above
Will show Headers and footers checkbox option
OBSERVATION: One time activated the @page rule stays on the current tab, to disable the @page rule and test again the behavior, should full refresh the page(ctrl+F5/cmd+shift+R).

How I solved

On sx prop of my MUI Box component, I insert this @page CSS rule to config, tried on @media print, without success.

The same way you use this to not show headers and footers, you should use inverse to show.

// PrintContainer
…
<Box
  …
  sx={{
  …,
  "@page": {
     "margin-top": "auto", // Show headers | If you want to define some margin, it should be >= "9mm"
     "margin-bottom": "auto", // Show footers | ‘’’’
  },
  …
  }}
>
…

Thoughts

I think it should be something about MUI config on default theme that disables and override some default configs, idk another answer to this.

Hope this temporary config should help you guys.

Stack tests:

Nextjs - 13.2.4 and 13.5.6
MUI - 5.11.14 and 5.15.7
react-to-print - 2.14.13 and 2.14.15

System:

OS: macOS Sonoma 14.2.1 Browser: Chrome - Version 121.0.6167.139 (Official Build) (x86_64)

MatthewHerbst commented 9 months ago

Hello, thanks for writing this up.

https://codesandbox.io/p/devbox/print-container-not-showing-headers-footers-checkbox-8cj65z?file=%2Fsrc%2Fcomponents%2FPrintContainer.tsx%3A16%2C13

I'm unable to access this link, is it correct/do you need to make it public?

This is really interesting though. I was able to replicate the issue locally using the examples. Commenting out these lines resolved the issue. However, while having those lines commented out I toggled the show headers/footers once, and now, even with those lines running, I cannot replicate the issue. Very strange.

This seems more like an upstream bug in Chrome than a bug with MUI or anything else. Safari does not appear to have this issue. Firefox also seems to not have this issue, and instead forces headers and footers on even with the lines above (which also feels like an upstream bug in Firefox).

Will investigate this more, thank you. My guess is that we have limited ability to fix this in a generic way though 😢

reisblucas commented 9 months ago

@MatthewHerbst lol I forgot to make it public. Now, it's edited with new link, everyone can fork and follow those steps.

reisblucas commented 9 months ago

@MatthewHerbst Maybe, after you enabling and commenting again, continue to appear the option because the rule was set on this chrome tab, so you need to force refresh the page(F5/cmd+R) to reproduce again.

On my attempt to reproduce on sandbox by the first time, nextjs v14 with App Router was installed instead of v13 with pages router. So I just simulated there, on v14, without MUI theme provider and etc.

It showed options and header as normal, thats why I think about MUI could be part of the problem.

sensasi-delight commented 4 months ago

I recently encountered a similar issue where the page margins suddenly disappeared when printing, even though I hadn't changed my code for the past four weeks. Strangely, this printing issue just appeared today. I tried to find which PR from MUI caused this, but there were too many to sift through, making it difficult to pinpoint the exact one. I just wanted to share a solution that I implemented, which is different from what the author suggested. I used the pageStyle property in the ReactToPrint component:

<ReactToPrint
  {...props}
  - pageStyle="@page { margin: auto; }" // this line is working fine for the past four weeks
  + pageStyle="@media print { margin: auto; }"
 />

I hope this helps someone experiencing the same problem.

MatthewHerbst commented 4 months ago

@sensasi-delight thanks for the report. Based on your fix, it's possible MUI added some code that also uses @media print so you need your specifier to be more specific to override theirs. Just a guess though, I haven't looked at their code

MatthewHerbst / react-to-print