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.
Inconsistent text rendering in headless mode
See original GitHub issueEDIT: The fix is to add --font-render-hinting=none to the launch args. E.g.
var browser = await puppeteer.launch({
headless: true,
args: ['--font-render-hinting=none']
});
Original Comment: Font spacing seems to be inconsistent between headless and non headless mode. This is likely a Chromium bug for Puppeteer versions 1.2.0 and above.
Steps to reproduce
Tell us about your environment:
- Puppeteer version: 1.2
- Platform / OS version: Linux
- URLs (if applicable):
- Node.js version: 8.6.0
What steps will reproduce the problem?
- screenshot.js
'use strict';
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch({ headless: true }); // toggle to false
const page = await browser.newPage();
await page.goto('file:///tmp/test.html');
await page.waitFor(5000);
await page.screenshot({path: '/tmp/screenshot.png'});
await browser.close();
})();
- test.html
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lato">
<style>
body {
font-family: 'Lato', serif;
font-size: 15px;
}
div.a {
line-height: 0.5;
}
</style>
</head>
<body>
<div class="a">
<div>aaaaa..............................................................................|111</div><br>
<div>qwertyasdfzxcvyuiohjklbnm................................|222</div><br>
<div>longlonglonglonglonglonglonglongshorty......|333</div>
</div>
</body>
</html>
node /tmp/screenshot.js, then repeat withheadless: false
What is the expected result?
Text is correctly aligned and looks the same as opening the HTML in browser. headless: false
What happens instead?
Text is misaligned with headless: true
Issue Analytics
- State:
- Created 5 years ago
- Reactions:48
- Comments:28 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
--font-render-hinting=noneseems to be the trick for meAfter digging a little bit more, I found that the inconsistency is caused by https://github.com/GoogleChrome/puppeteer/pull/2072
which in turn, is from https://github.com/chromium/chromium/commit/e1b855d4545dc4fff19cee500d7ce105126f3bd2
If I understand correctly the changes to Chromium, Puppeteer’s
Launcher.jsshould set DEFAULT_ARGS for--font-render-hintingtomediuminstead of leaving it at default. Doing so does indeed resolve this issue.I can make a PR if this is an acceptable solution. Any thoughts, @aslushnikov?