Safari 5 Has Some Printing Problems

A bug report was logged against my application today concerning the new Safari 5 release. On the Mac it apparently displays some layout issues that I don't see on the Windows version, so I can't say much about those (though they seem pretty fishy; button elements styled with borders rendered such that the borders aren't completely drawn doesn't seem like a CSS issue to me ...). Also reported however was a problem with printing. Some of the application (the "help" pages) are printable, and have a "print" stylesheet that arranges for some differences with the screen version. Some elements are hidden, links are printed a different way, etc. The print version works fine in IE7 & 8, Chrome 4 and 5, Firefox 3.5 and 3.6 (and probably 3.0/3.1 too), and Safari 4. In Safari 5, however, it's completely broken — not a little wrong, but obviously messed up and totally unreadable. I messed around with the stylesheet randomly with no luck, and so I started on a much simpler test page (here). That page is also broken when printed from Safari 5, in a very similar way too. Hmm. I decided to start with the part of the stylesheet that was most relevant to the paged media context: the @page rules. The stylesheet had:

@page { margin: 1in 1.75in 1.5in 1.5in; } @page :left { margin: 2in 1.75in 1.5in 1.5in; }

Those do pretty much nothing at all in all the browsers I know of, but sure enough when I commented those two lines out, printing started working. Searching around the Apple documentation, I could find nothing to suggest that those rules should cause a freak out. Nor could I find any mention of a change in semantics from Safari 4 to Safari 5; in fact I could find no mention of @page on the Apple site at all, even though they do list some unsupported CSS stuff. (Note that @page is a CSS2 thing, though again none of the browsers seem to pay attention to it.) It finally dawned on me what was going on in Safari 5's little mind: those @page rules, formerly ignored completely, were being treated as if they were "*" rules. That is, the margin was being applied to everything on the page, and every block-level element. Well no wonder things looked funny. The moral of this story is to keep @page rules out of your print stylesheets, as most everybody probably does anyway.