daveearley/screenshot.rocks

Screenshot engine fails to render flex/grid gaps

Closed this issue · 3 comments

Another problem I've noticed is that gaps between items are sometimes failing to show up properly. As an example, if you try to render this website:

https://parceljs.org/

Notice the nav items in the top-right area. They're spaced using the "gap" property in the CSS, but if you use this tool, that part of the page looks like this:

https://i.imgur.com/ALAHrCg.png

I've seen this happen many times on different screenshots. It seems like the browser engine that's used to render the screenshots doesn't support the "gap" property. This is similar to trying to view "gap" in a browser like Safari on iOS. Is it possible to use an updated browser engine for rendering?

I'm using an old version of Puppeteer to generate the screenshots, which is likely the issue. I'm working on upgrading now 👍

This should be fixed now:
Screenshot 2023-03-31 at 20 54 03

Great! Thanks, looking forward to using it.