css.at-rules.page.size - Safari does not handle print page margins correctly
Nobody has claimed this yet.
- Dominant language
- JSON
- Stars
- 5.8k
- Forks
- 2.6k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 186
Description
What type of issue is this?
Browser bug (a bug with a feature that may impact site compatibility)
What information was incorrect, unhelpful, or incomplete?
Safari does not handle print page margins correctly, for example
@media print {
@page {
margin: 2in;
}
}
What browsers does this problem apply to, if applicable?
Safari
What did you expect to see?
The page for @page does not indicate that Safari is missing this feature.
Did you test this? If so, how?
Render this page, and print in both Chrome and Safari. On the printed page, the red box is centered in Chrome (correct), but is not centered in Safari (incorrect). I am using Safari version 17.0 (19616.1.27.211.1).
<!DOCTYPE html>
<style>
@media print {
@page {
size: letter;
margin: 2in;
}
}
html {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
#main {
background-color: red;
height: 9in;
width: 6.5in;
}
</style>
<div id="main"></div>
Can you link to any release notes, bugs, pull requests, or MDN pages related to this?
No response
Do you have anything more you want to share?
Here is a related Stack Overflow page:
https://stackoverflow.com/questions/13154147/how-to-set-safari-print-margins-via-css-to-print-borderless
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/@page
MDN metadata
MDN page report details
- Query:
css.at-rules.page.size - Report started: 2024-05-27T05:17:36.029Z
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the MDN @page page and the compatibility-data query css.at-rules.page.size. Reproduce the supplied print example in Chrome and Safari, then inspect the corresponding Safari compatibility entry. Done means the data accurately reflects the verified Safari behavior and passes the repository's validation checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 43/100