1463626 - Page printout is messed up

Status: NEW

(Core :: Print Preview, defect)

Description

[Igor R.]

Attachment: Walmart customer service -- messed-up-printout. You can see the elements overlapping. This doesn't happen during the screen rendering

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180516032328

Steps to reproduce:

Print a page:
https://help.walmart.com/app/ask_confirm/channel/Phone/refno/180522-004094



Actual results:

Printout of the page has elements overlapped - in contrast to the on-screen rendering.
On some other pages (such as an order confirmation) it is even worse.


Expected results:

Printout should be close to the way it shows on the screen (screen rendering, yet before the print preview), and should not have elements overlapping if that was not the intent of the webpage developer.

Comment 1

[Timea Cernea [:tbabos][inactive]]

Hey Igor,

I reproduced the issue on the latest Nightly 62.0a1 (2018-05-28), Firefox Release 60.0.1, Firefox Beta 61.0b8.  
Compared to Chrome (which also displays several overlapped icons) the print preview looks more messed up, check the attached screenshot.

Thank you for the report.

Comment 2

[Timea Cernea [:tbabos][inactive]]

Attachment: Firefox print preview

Comment 3

[Timea Cernea [:tbabos][inactive]]

Attachment: Chrome print preview

Comment 4

[Igor R.]

The problem is still present in 63.0.3.
There is a similar situation with rendering product pages on Amazon:
https://www.amazon.com/gp/product/B000DZGN7Q/

And yes, Chrome also has the same problem, - but it doesn't mean that Firefox shouldn't fix it.
If Firefox can render the page correctly for the screen, it should be able to do the same for printing.

Comment 5

[Igor R.]

Attachment: Amazon Product Page - Print Preview. Image overlaps the text. (Screen rendering is fine)

Comment 6

[Wayne Mery (:wsmwk)]

Does this still reproduce?

Doesn't for me on Mac with 109 beta

Comment 7

[Igor R.]

There is some improvement, but there is still a problem.
Using that link for the Amazon page, choose the 5th image, and the printout will have it over the text.
See the new attachments.

Comment 8

[Igor R.]

Attachment: The Amazon product page with the 5th image chosen has that image over the text

Comment 9

[Igor R.]

Attachment: That 5th image on the Amazon page overlap with the text in the print preview

(Note that the Walmart link has changed and no longer has the same images/complexity, so it is not a good testcase anymore.)

Comment 10

[Igor R.]

v. 108.0.1 on Windows 10

Comment 11

[Igor R.]

The problem is still observed with v.147.01 on Mac, if you select the wider images (currently, images #2,3,4).