I wanted to use a media="print" CSS to position a logo on the left of every printed page. The code seems correct to me and works fine in Firefox but in Safari there are two errors:
- The logo does not appear on *every* page. It is printed only once. ("For paged media, boxes with fixed positions are repeated on every page", http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning)
- If the viewport is scrolled when I print the page, the logo is printed at the wrong position.
Minimized example code:
<div style="background-color:#ddd; height:30cm;">Make page big</div>
<div style="position:fixed; top:0px; left:0px;">Should be on the upper left of all pages!</div>
How to reproduce:
- Save the example code to file.html
- Open file.html in Safari
- Print (Preview)
- Scroll to the end
- Print (Preview)
On screen the text "Should be on the upper left of all pages!" should be fixed on the upper left corner. When scrolling down the text is still there. This works fine.
When printed, the text should be on the upper left of *every* page. The text should *not* move down on the printout regardless where you scrolled to on screen. Both previews should be equal.
Created attachment 6510 [details]
Reporter, could you add the testcase to the bug next time? like i did now? Thanks!
Rather than opening another bug that would be very similar to this one, I'm just going to add another attachment test case.
The pagestest.html attachment attempts to place a "Page N" footer at the bottom of every page when printed. It uses a position: fixed element and a Content: counter to do this. It fails miserably with WebKit.
The "Page " footer only appears once and it's usually at the top of the last page (although sometimes part of it is cutoff and appears partially on the next-to-last page as well).
Created attachment 51797 [details]
Attempts to place "Page N" footer on bottom of each of 4 pages
This is also a problem for me - tested using Safari 5.0.1 (Windows)
I attach a test file. When correctly rendered (tested in Firefox and IE), "print preview" mode shows the tag text at the bottom of both pages.
Going to ask w3schools to mention that on their CSS compatibility table...
Created attachment 64345 [details]
When rendered correctly, this should print 2 pages with a tag at the bottom of each page.
Fixed elements not being on every page may be fixed by bug 100075.