@page :first { margin: … } in Chrome bug?

Question

Referring to the full fiddle at: http://jsfiddle.net/XT92a/

@page {
    margin: 1in;
}

@page :first {
    margin: 2in 1in 3in 3in;
}

I exp

Answer 1

Solution that worked in my case and made all margins similar across all pages. Before, first page used to give bigger margin. Instead of using margin-top:20px use padding-top:20px in the block which is going first in page div. This may be

Works:

header {
    margin:0px 80px 20px 80px;
    padding-top:50px;
}

Not working (gives bigger top margin on first page):

header {
    margin:50px 80px 20px 80px;
}

Answer 2

You stated:

Mozilla's documentation seems to me to claim that Chrome supports this properly.

True, but the :first CSS pseudo-class shows unknown support from Chrome ("Unknown support. Please update this."

Also, there are many print preview issues with Chrome and I stumbled across some that sounded similar to this problem such as this one. Nevertheless, I could find no work arounds. Just so you are aware in your own testing I tried:

• negative margins
• padding rather than margins
• large borders to simulate margins
• forced page breaks (possible hack solution)
• explicit width and height
• !important

I performed a lot of testing and Chrome appears to ignore or improperly implement the CSS rules when generating the preview PDF file. Personally, from my testing results, I think this is a bug.

Update

• Firefox v17.0.1 - Does not apply @page rules at all.
• Chrome 23.0.1271.97 m - incorrectly applies the :first pseudo class on all pages.
• IE 9.0.8112.16421 - performs the same misapplication of rules as Chrome

My findings coincide with the browser compatibility chart on the :first pseudo class page. That is, an unknown compatibility for Chrome and a "not supported" compatibility for Firefox. I was unable to test IE8, but my test with IE9 does not support the chart's claim. Even Microsoft's examples fail to render correctly (CSS How-to: Optimize Pages for Printing Using CSS).

After more testing, I can only conclude that @page hasn't been completely integrated into most browsers. The specifications are present (there are new specs. for CSS3) but based on our tests, the lack of tested examples in articles, and the bug reports it looks like you won't be able to successfully use the more flexible specs of the @page styling.