Markdown checkbox missing check mark

[ghost]

• Gitea version (or commit ref): 1.16.0
• Git version:
• Operating system: Windows
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (https://try.gitea.io/ZukenHammer/markdown-checkbox-print/src/branch/master/README.md)
  • No

Description

When trying to print a markdown with checkboxes in a list from Gitea the check mark is missing in the printing.
Tried browsers:

• Chrome 93
• Firefox 90
• Edge 93

Screenshots

Webpage:

Printing preview:

[wxiaoguang]

Remove some css styles, then the check mark appears again.

.markup input[type=checkbox] {
    /* -webkit-appearance: none; */
    /* -moz-appearance: none; */
    /* appearance: none; */
}
.markup input[type=checkbox]:after {
    /* background: var(--color-text);  Firefox is not affected by this, but Chrome is */
}

And it's very strange that this bug is not related to media(print), if the media(print) is activated manually in Chrome's Developer Tools console, the rendered page in browser is still correct while the print preview is wrong.

ps: I didn't mean removing these styles is a correct fix, I just tried to confirm the problem, the problem seems a little complex and it might need to be fixed carefully 😂

[sebastian-sauer]

When enabling "Background graphics" in Print Dialog (expand More Settings) the Checkbox will be rendered correctly.

[sebastian-sauer]

Looks like a "-webkit-print-color-adjust: exact;" for the checkbox:after will solve this issue. (and a color-adjust: exact) for Firefox

[sebastian-sauer]

In Firefox the problem is solved by adding the color-adjust. Looks like chrome doesn't apply the mask-image when printing: