Image positioning and shifted images
Reported by
gimbo...@gmail.com,
Jul 31
|
||||
Issue descriptionI'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.  Can you suggest me what is wrong with it? Thank you. Giorgio
,
Aug 7
,
Aug 7
Thank you for your suggestion. I tried both Chrome and Chromium ver 68.x but the result is the same.
,
Aug 9
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.
,
Aug 10
|
||||
►
Sign in to add a comment |
||||
Comment 1 by thestig@chromium.org
, Aug 7