Full page screenshot

[softvar]

Can we improve the rendering of full-page screenshot i.e. tackling fixed elements as well as lazy-loading of elements at a particular scroll or maybe infinite scrolling too.

---

IssueHunt Summary

Backers (Total: $60.00)

• issuehunt ($60.00)

Submitted pull Requests

• #95 workaround fullPage clipping bug by using clip

---

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[sindresorhus]

tackling fixed elements

Any suggestions on how to tackle this?

maybe infinite scrolling too.

This is already planned.

[softvar]

1. For FIXED elements,

a) Open the page in a particular viewport width(W) and height(H) and then capture the screenshot of the viewport only. b) Scroll the page horizontally(W+W) and take the screenshots until fully scrolled horizontally. c) Now scroll vertically(H+H) and take the screenshot. d) Repeat steps (b) and (c) e) Now smartly stitch the images in such a way it looks like a full-page screenshot. f) For tackling FIXED elements, after taking the very first screenshot, remove them from page otherwise they will repeat in every screenshot and will cause noise.

2. For INFINITE scroll

a) Scroll the page to the bottom b) Check if height is increased because of lazy-included elements at the bottom c) Repeat (a) and (b) until height is not increasing or the MAX_SCREENSHOT_HEIGHT is reached. d) Now apply the same strategy as mentioned above

Hope this might help.

Let me know if I could help in this. It would be great to work with you someday.

[IssueHuntBot]

@issuehunt has funded $60.00 to this issue. See it on IssueHunt

[brandonweiss]

I’m unsure what known bugs (if any) there might be with full-page rendering, but I just tried this out on my website and noticed the bottom was cut off. I don’t think I’m doing anything particularly weird that could account for it being cut off…

Here is the generated screenshot (hiding behind details element because it’s big):

And this shows the missing portion from the bottom:

[Takeno]

Hi @brandonweiss . I think that problem is caused by some heights with vh units. Under the hood, Chromium extends the viewport to fit body height (https://bugs.chromium.org/p/chromium/issues/detail?id=763421). This is explained here https://github.com/GoogleChrome/puppeteer/issues/703

@sindresorhus please consider this workaround for fullPage screenshots: https://github.com/GoogleChrome/puppeteer/issues/703#issuecomment-366041479

[brandonweiss]

@Takeno Interesting! Thanks for the links!

[fregante]

If there's a way to hack vh/vmin units to a certain viewport height (𝑦), the viewport can be set to the page height on load (𝑦)

[SilencerWeb]

Any updates? :)

[sindresorhus]

@SilencerWeb https://blog.sindresorhus.com/issue-bumping-e3b9740e2a0

[sgtrusty]

Hi @brandonweiss . I think that problem is caused by some heights with vh units. Under the hood, Chromium extends the viewport to fit body height (https://bugs.chromium.org/p/chromium/issues/detail?id=763421). This is explained here puppeteer/puppeteer#703

@sindresorhus please consider this workaround for fullPage screenshots: puppeteer/puppeteer#703 (comment)

Still need this implemented? I am considering implementing both solutions in https://github.com/sindresorhus/capture-website/issues/1#issuecomment-462073349 once done with current PR for fullPage.