chromeless
chromeless copied to clipboard
schickling
Hiding scrollbars for screenshots
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:
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.
One quick hack to remove scrollbars is to set the viewport height longer than the page itself.
It's a good thought, but I imagine there are edge cases where that won't work very well (thinking of infinite scroll, etc).
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.
Yeah, I was actually using puppeteer up until today without any scrollbars, but I'd really love to get the concurrency benefits of Lambda.
I'm using Puppeteer w/ Lambda... check the issues in that repo, there are a few how-tos.
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.
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?
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.
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.
--hide-scrollbars was removed from Chromium several years ago: https://bugs.chromium.org/p/chromium/issues/detail?id=350136.
Oh, maybe it was brought back just for headless mode: https://github.com/chromium/chromium/blob/d91428bfde320278621f8a9346d2e84c108b81a9/headless/app/headless_shell_switches.cc#L43.
As a workaround you can use the .evaluate function
.evaluate(() => { document.querySelector('html').style.overflow = 'hidden'; // hide scrollbar })
Kinda works this way...
