Chromeless: Hiding scrollbars for screenshots

[counterbeing]

This was mentioned here https://github.com/graphcool/chromeless/issues/92 as part of a "full page screenshot option". But there was very little discussion specifically about hiding scrollbars. Is there currently a way to do this?

I'm trying to take screenshots of how things will look on a mobile device, and the scrollbars change the actual dimensions of the page.

Here's an example:

[counterbeing]

I'm new to both Lambda and Serverless. But I did a little more poking around to try and find where chrome is actually invoked, because i saw that there was a setting for scrollbars there. It looks like the plugin that actually invokes chrome already has scrollbars disabled as a default: https://github.com/adieuadieu/serverless-chrome/blob/d1eda540b98225fcfb0238ca6d32016ffc7d7cc6/src/config.js#L11

I'm not quite sure how to further debug this at the moment.

[bluepeter]

One quick hack to remove scrollbars is to set the viewport height longer than the page itself.

[counterbeing]

It's a good thought, but I imagine there are edge cases where that won't work very well (thinking of infinite scroll, etc).

[bluepeter]

I don't have scrollbars with the setup I have... I am using Google Puppeteer which is a variation of this repo... not sure if that is the reason why or not.

[counterbeing]

Yeah, I was actually using puppeteer up until today without any scrollbars, but I'd really love to get the concurrency benefits of Lambda.

[bluepeter]

I'm using Puppeteer w/ Lambda... check the issues in that repo, there are a few how-tos.

[counterbeing]

That seems like a potential option, but sticking with chromeless seems like it will really save me a lot of work, so I think I'm hoping to stick to this.

[joelgriffith]

This is definitely an issue, or at least should be configurable. The chrome protocol for handling this can easily remove scrollbars. qq: does puppeteer expose this in their API?

[counterbeing]

It looks like puppeteer disables scroll bars by default.

If I'm understanding everything, it seems like chromeless, depends on serverless, which depends on a plugin to actually start google chrome. At that point it's fired with the exact same --hide-scrollbars argument. Unless I missed something they should both be fired with the same argument, so I'm not sure where this is coming from.

[jelder]

I'm having a bit of trouble testing this in https://github.com/graphcool/chromeless/pull/404, but it looks like we could just add the --hide-scrollbars flag.

[marco-c]

--hide-scrollbars was removed from Chromium several years ago: https://bugs.chromium.org/p/chromium/issues/detail?id=350136.

[marco-c]

Oh, maybe it was brought back just for headless mode: https://github.com/chromium/chromium/blob/d91428bfde320278621f8a9346d2e84c108b81a9/headless/app/headless_shell_switches.cc#L43.

[yatsyukv]

As a workaround you can use the .evaluate function
.evaluate(() => { document.querySelector('html').style.overflow = 'hidden'; // hide scrollbar })
Kinda works this way...