I have confirmed that this is related to the retina display only. If I use (only) an external display on a Macbook pro, screenshots come out the same as they do on any other platform.

@psbanka thank you so much for your kind words!

Selenium seems to create a way bigger image on retina displays than on normal screens. I had similar problems when working on mobile support (iPhone/iPad). Still haven't figured out what's the best way to tackle that problem. I probably need to resize the image down to the actual document size but then I loose valuable information of the screenshot. Other way would be to scale up the element boundaries. Both ways need to get tested and evaluated.

Does window.devicePixelRatio help? Figuring out the size and location of an element by scaling up like this: element.offsetWidth * window.devicePixelRatio. https://developer.mozilla.org/en-US/docs/Web/API/Window.devicePixelRatio

Having the same issue. The generated screenshot has the correct size, but all dom elements are twice as big.

Adding a comment to be notified, I haven't found a solution yet

We're having this problem in our team too. Older mac screenshots do not compare successfully to newer (retina) macs

👍

Also having this issue :)

+1

Someone should really try experimenting by scaling the crop rectangle by window.devicePixelRatio and see if that just solves this outright. I'm guessing it will.

I was trying to scale up element size to retina size but screens unfortunately still are cut.

@TheSavior Yes, scaling by window.devicePixelRatio now works just fine as the screens are no longer cut since #116. Thanks for the advice!

Has there been any movement on this in the meantime?

@TheSavior thanks , I find out the solution from your tip.
In my code, I use selenium screenshot full page for chrome and firefox.
I Use the stitch way fulfill my requirement, and the results are incorrect like you mention.
And I resize the screenshot by divide my device ratio. it works perfectly.
thanks : )