search

c0bra / deviceframe

:iphone: Put device frames around your mobile/web/progressive app screenshots.
Other
580 stars 16 forks source link

Wrong screen size ? #9

Open LukyVj opened 6 years ago

LukyVj commented 6 years ago

Hey! What an amazing tool you got here! I tried it a few times today, and most of the screenshots I've seen are a bit odd.

See, this is the result of our website on an iphone 7+ : https://puu.sh/z9hAP/00c3ab0bdb.png

And it should render like this:

https://puu.sh/z9hDl/a58003853f.png

Not sure how you can fix it, but I felt like opening an issue was the right thing to do!

c0bra commented 6 years ago

@LukyVj thanks for the kind words! I love Algolia so it's awesome to have you trying this tool out :)

Opening an issue is definitely the right thing to do; seems like a bug.

deviceframe uses the same libraries as pageres under the hood so you can manually test with that. When I do:

pageres https://algolia.com 375x667 (dimensions for iPhone 7)

The result looks right. However in my code I'm cropping to the device hight. When I do that:

pageres -c https://algolia.com 375x667

I get the weird content overflow. I'll try messing around with it a bit and see if I can find the culprit.

c0bra commented 6 years ago

@LukyVj I pushed a fix in version 1.0.2. The screenshot-stream package is generating the image with a width of >500px when the supplied width is 375px. No idea why, possibly some issue with phantomjs. The fix manually resizes and crops.

It doesn't show up exactly like your second screenshot, the lower image is missing but that happens in phantom as well.