Headless: Font rendering / line break different from desktop chrome |
||||||||||||
Issue descriptionFrom headless-dev: https://groups.google.com/a/chromium.org/d/msg/headless-dev/mM015OBcCZE/hd-K2_kdAQAJ "I noticed a difference in fonts while using CDP to make a screenshot. In headless mode, there is a slight difference compared to the real display on the browser, which can make a character shift in some situations." Repro HTML + Node JS (DevTools) attached, as well as a screenshot showing differences between desktop (left) and headless (right). Running the node script against desktop chrome produces the same output as shown on the left.
,
Jul 28 2017
Note that I can reproduce the same bug with Woff or Woff2 fonts.
It's look like the headless mode doesn't handle font in the exact same way, even with looong delay or the brand new font-display: block.
I even tested "text-rendering: geometricPrecision;" applied on * {};
I checked the computed styles on HTML node where the text is written and they are strictly the same on headless or not mode (everytime with --disable-gpu and with the same remote debugging script)
,
Jul 28 2017
Note that I reproduced it with Google Chrome 60.0.3112.78 on Debian 8.7.
,
Jul 28 2017
In order to let you test easier, I attached the following files: - package.json : node dependancies - testfont.js : node script - testfont.html : HTML file using google font - testHeadless.png : Result while using headless mode - testVis.png : Result while using NOT headless mode In order to test it: 1. Start chrome on headless mode on port 9223 google-chrome --disable-gpu --headless --hide-scrollbars --remote-debugging-port=9224 2. Start chrome without headless mode on port 9224 google-chrome --disable-gpu --hide-scrollbars --remote-debugging-port=9223 3. Run node script 2 times : node ./testfont.js --inputFile=/path/to/testfont.html --CDP_PORT=9223 --outputFile=testHeadless.png node ./testfont.js --inputFile=/path/to/testfont.html --CDP_PORT=9224 --outputFile=testVis.png Compare both images. Notice many differences in the shapes, sizes and spaces on letters.
,
Aug 4 2017
Just tested again with Chrome 62 and I have the same rendering difference.
{
"Browser": "HeadlessChrome/62.0.3175.4",
"Protocol-Version": "1.2",
"User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/62.0.3175.4 Safari/537.36",
"V8-Version": "6.2.129",
"WebKit-Version": "537.36 (@b0aeb1f5e383f24b935b2c5575d70ef2669c0dd3)"
}
,
Feb 13 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e1b855d4545dc4fff19cee500d7ce105126f3bd2 commit e1b855d4545dc4fff19cee500d7ce105126f3bd2 Author: Maksim Kolesin <mkolesin@gmail.com> Date: Tue Feb 13 23:08:53 2018 using HINTING_FULL by default in headless builds, added command line parameter to override it These changes fix font rendering differences between headless and non-headless runs on linux. Default font hinting is HINTING_MEDIUM, which leads to usage of subpixel glyphs positioning in Skia. But in desktop environment hinting eventually resolves to HINTING_FULL and we get slightly different font rendering as a result and no option to control it using command line flags. In this commit --font-render-hinting is added as a new command line parameter for headless runs with HINTING_FULL as a default value R=dvallet@chromium.org, skyostil@google.com Bug: 744577 Change-Id: Iffac55899a7ac98c418d9ee5b4af961017cfb09a Reviewed-on: https://chromium-review.googlesource.com/899248 Reviewed-by: Sami Kyöstilä <skyostil@chromium.org> Commit-Queue: David Vallet <dvallet@chromium.org> Cr-Commit-Position: refs/heads/master@{#536535} [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/AUTHORS [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/BUILD.gn [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/app/headless_shell.cc [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/app/headless_shell_switches.cc [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/app/headless_shell_switches.h [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/lib/browser/headless_browser_context_options.cc [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/lib/browser/headless_browser_context_options.h [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/lib/browser/headless_web_contents_impl.cc [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/public/headless_browser.cc [modify] https://crrev.com/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/public/headless_browser.h
,
Feb 14 2018
,
Jul 25
For others looking at this issue, I had better results running chrome with these flags: /usr/bin/google-chrome-stable --font-render-hinting=none --remote-debugging-port=9222 According to https://chromium.googlesource.com/chromium/src/+/e1b855d4545dc4fff19cee500d7ce105126f3bd2/headless/app/headless_shell.cc#76 possible values are: none|slight|medium|full|max Flag values full and max produced identical results. Also, values none, slight, and medium seemed identical. This made chrome 66+ render the same as chrome 65- Cheers! |
||||||||||||
►
Sign in to add a comment |
||||||||||||
Comment 1 by eseckler@chromium.org
, Jul 17 2017