[Layout] Misplaced div elements and too many pages when printing

NEW
Unassigned

Status

()

Core
Printing: Output
P3
normal
2 months ago
4 days ago

People

(Reporter: maaaddog, Unassigned)

Tracking

({regression})

Trunk
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

732 bytes, text/html
Details
(Reporter)

Description

2 months ago
Created attachment 8929144 [details]
test.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171003144318

Steps to reproduce:

I wanted to print multiple pages in Firefox (File->Print Preview), where each page is represented as a div class "page". Within each page I have a child div "bottomline" with position:absolute, bottom:0 and left:0.


Actual results:

While Firefox shows the content correctly (i.e. separate pages each with its own bottom line) the print preview is wrong: A div element from the second page is suddenly shown in the first one. This concerns Firefox version 56 and 57 (reproduced on Linux Mint 18.1 Firefox 56.0 64-bit as well as on Windows 10 with Firefox Quantum 57.0 64-bit).


Expected results:

Since each bottom line is in its own div element "page", not only the browser but also the print preview and the printing output should align each bottomline to its corresponding page (parent div element).
(Reporter)

Comment 1

2 months ago
Test the following HTML-lines (see also file attachment above) in Firefox 56 or 57:
---------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PageTest</title>
<style type="text/css"> 
  html, body     { width:100%; margin:0 auto; padding:0; }
  div.page       { position:relative; width:100%; height:275mm; background-color:#fff; }
  div.space      { position:relative; width:100%; height:20mm;}
  div.bottomline { position:absolute; bottom:0; left:0; width:100%; font-size:0.75em; }
</style>
</head>
<body>

<div id="page1" class="page">
<div class="space"></div>
<h1>Title1</h1>
<div class="bottomline">First bottomline</div>
</div>

<div id="page2" class="page" style="page-break-before:always;">
<div class="space"></div>
<h1>Title2</h1>
<div class="bottomline">Second bottomline</div>
</div>

</body>
</html>
https://www.fxsitecompat.com/en-CA/docs/2017/page-break-before-after-in-print-stylesheet-may-lead-to-lack-or-overlap-of-elements/
Blocks: 1308876
Component: Untriaged → Printing: Output
Keywords: regression
Product: Firefox → Core
(Reporter)

Comment 3

2 months ago
Comment on Koheis'link above: This problem is still present, even if you omit 'style="page-break-before:always;"' in the second div page - just try it out.

Updated

2 months ago
Priority: -- → P3
Also repros on Mac Nightly builds.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Firefox 56 and 57: Misplaced div elements when printing multiple pages → [Layout] Misplaced div elements and too many pages when printing
Version: 56 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.