New issue
Advanced search Search tips

Issue 869416 link

Starred by 3 users

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Image positioning and shifted images

Reported by gimbo...@gmail.com, Jul 31

Issue description

I'm creating pdf with images from HTML in Puppeteer. With a particular configuration images are shifted downwards, see the steps below.
I use an div to absolute position an image in the page, and a negative margin-top to crop the image.

I'm writing here because they redirected me here from GoogleChrome/puppeteer (see https://github.com/GoogleChrome/puppeteer/issues/2855)

My environment:

* Platform / OS version: Ubuntu 18.04
* Chrome Version       : 63.0.3239.84
* Puppeteer version: 1.5
* Node.js version: v8.10.0
But I get the same issue in the demo website.

**What steps will reproduce the problem?**

This web HTML code...
````
<section>
	<div style="position: absolute; overflow:hidden; width: 21cm; height: 8cm; left: 2cm; top: 11cm; background-color: red;">
		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGdxoUUNZBR8j-WXPSKg3mOW0SsPNX-PByW-6KVegY5u1oKfApgg" style="height: auto; width: 21cm; margin-left: 0cm; margin-top: -4cm;" />
	</div>
</section>
````

Look at `top: 11cm` in the div, and `margin-top` in the img.

With this code:
`	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.goto('http://localhost/index_bug.php', {waitUntil: 'networkidle2'});
	await page.pdf({
		path: 'amicici2017_bug.pdf', 
		format: 'A4',
		landscape: true,
		printBackground: true,
		margin: { 
			top: "0px", 
			bottom: "0px",
			right: "0px",
			left: "0px",
		}
	});
	await browser.close();
`

**What is the expected result?**
With `top: 10cm` or less I get the full picture, that is (almost) what I want.

**What happens instead?**
With `top: 11cm` or more I get half of the full picture, it is shifted-.
On line it looks right.
It seems that when div_top - img_bottom-top > 7cm the image is shifted.
In portrait mode it seems to work (or at least I haven't found a combination that creates the issue).
Chrome --headless prints in portrait mode so it does not present this issue.

![screenshot_20180709_002931](https://user-images.githubusercontent.com/2583955/42424632-bf38226e-830f-11e8-8909-6cbf9d46bafa.png)

Can you suggest me what is wrong with it?

Thank you.

Giorgio



 
Components: Internals>Printing Internals>Headless
Can you start by trying a newer version of Chromium? Current Chrome Stable channel is 68.x, so try a matching Chromium build.
Labels: Needs-Milestone
Thank you for your suggestion. I tried both Chrome and Chromium ver 68.x but the result is the same.
Components: -Internals>Headless Blink>Layout
Labels: OS-Chrome OS-Mac OS-Windows
Status: Untriaged (was: Unconfirmed)
It looks like one can reproduce this in Print Preview without using Puppeteer or Headless mode:

1) Load the webpage
2) Print use the following settings:
- Destination: Save as PDF
- Layout: Landscape
- Paper size: A4
- Margins: None
- Background graphics: On

Chrome and Safari has this issue whereas Firefox and Edge does not. All browsers behave slightly differently though.

Over to Blink>Layout for triaging.
Status: Available (was: Untriaged)

Sign in to add a comment