Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Border-width not respected below 1px on PDF export

See original GitHub issue

Steps to reproduce

Tell us about your environment:

Puppeteer version: puppeteer-core@1.8.0
Chrome version: Version 73.0.3683.103 (Official Build) (64-bit)
Platform / OS version: CentOS Linux 7
URLs (if applicable):
Node.js version: v8.11.4

What steps will reproduce the problem?

Create an HTML page with div or table having border width that are under 1px width (I want here to specify in point) and export as PDF.

My HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta name="Description" content=""/>
	<meta name="Keywords" lang="en" content=""/>
	<meta name="Identifier-URL" content=""/>
	<meta name="Reply-to" content=""/>
	<meta name="Copyright" content="copyright"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style>
		@page {
			size: A4;
		}

		body {
			width:21cm;
			height: 29.7cm;
		}
		table {
			border-collapse: collapse;
		}

		table td {
			border-top: solid .25pt black;
		}

		div.divTest1 {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 1pt black;
			min-height: 1cm;
		}

		div.divTest2 {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 2pt black;
			min-height: 1cm;
		}

		div.divTest3 {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 3pt black;
			min-height: 1cm;
		}

		div.divTest0-5px {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 0.5px black;
			min-height: 1cm;
		}

		div.divTest1px {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 1px black;
			min-height: 1cm;
		}

		div.divTest2px {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 2px black;
			min-height: 1cm;
		}

		div.divTest3px {
			width: 2cm;
			margin-top: 2cm;
			border-top: solid 3px black;
			min-height: 1cm;
		}

	</style>
</head>
<body>

<div class="page">
	<table>
		<tr>
			<td>cell1</td>
			<td>cell2</td>
			<td>cell3</td>
			<td>cell4</td>
		</tr>

	</table>

	<div class="divTest1">1pt</div>
	<div class="divTest2">2pt</div>
	<div class="divTest3">3pt</div>
	<br>
	<div class="divTest0-5px">0.5px</div>
	<div class="divTest1px">1px</div>
	<div class="divTest2px">2px</div>
	<div class="divTest3px">3px</div>
</div>


</body>
</html>

My puppeteer code to export as PDF:

const puppeteer = require('puppeteer-core');

(async () => {
  
  let fileoutput = process.argv[2];
  let uri = process.argv[3];
  const browser = await puppeteer.launch({ignoreHTTPSErrors: true,executablePath: '/opt/google/chrome/google-chrome',args: ['--no-sandbox','--disable-dev-shm-usage']});
  const page = await browser.newPage();
  await page.goto(uri,{ waitUntil: ['domcontentloaded', 'networkidle2'] });
  await page.pdf({path: fileoutput, format: 'A4',scale: 1,preferCSSPageSize:true, 'printBackground' : true});

  browser.close();
})();

What is the expected result?

We expect to have border width respected as specified in the CSS rules on the PDF export. I want a border width of 0.25pt for my client document print.

What happens instead? The border width specified in “pt” and below 1px are not respected in the PDF. Editing/inspecting the PDF with a vectorial editor (Inkscape for example), we can see that border width of 1px or higher are approximatively respected but under that, there are not. For example, the div width a border-width of 0.5px is approximatively 1px on the resulting PDF.

Pdf_result.pdf screenshot1 Screenshot2 Screenshot3 Screenshot4 Screenshot5 Screenshot6 Screenshot7