I recently encountered a puzzling issue with printing in Google Chrome for Mac that I am currently troubleshooting. I noticed that when I use the "Print Using System dialog" option, the @page within the print styles gets ignored, resulting in incorrect printouts. However, when I print using the built-in Chrome print dialog, everything seems to work just fine.
In Windows Chrome, both the system dialog and the regular dialog fail to recognize the @page properties.
The reason I have defined @page properties is because my version of bootstrap already includes them, and I need to override them for my specific needs.
Here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@page
{
margin:10cm 10cm;
}
@media print
{
@page
{
margin:0 !important;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
For a working example, you can visit: