daveearley / screenshot.rocks

Create beautiful mobile & browser mockups from screenshots
https://screenshot.rocks
MIT License
693 stars 57 forks source link

Screenshot engine fails to render flex/grid gaps #63

Closed impressivewebs closed 1 year ago

impressivewebs commented 1 year ago

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?

daveearley commented 1 year ago

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

daveearley commented 1 year ago

This should be fixed now:

Screenshot 2023-03-31 at 20 54 03
impressivewebs commented 1 year ago

Great! Thanks, looking forward to using it.