fix(feedback): Fix screenshot black bars in Safari (#11233)

Fixes issue where screenshotting in Safari results in black bars on the right and bottom of the image. Before: <img width="1278" alt="image" src="https://github.com/getsentry/sentry-javascript/assets/55311782/b2c174ad-8403-459a-b24b-7e055da3d657"> After: <img width="1278" alt="image" src="https://github.com/getsentry/sentry-javascript/assets/55311782/85fb850d-6c01-48cd-9fe0-21a860114b9d"> Relates to getsentry/sentry#63749
getsentry · Mar 21, 2024 · 492f115 · 492f115
1 parent 164b1f2
commit 492f115
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -217,11 +217,9 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
           if (!context) {
             throw new Error('Could not get canvas context');
           }
-          const sourceWidth = imageSource.videoWidth;
-          const sourceHeight = imageSource.videoHeight;
-          imageBuffer.width = sourceWidth;
-          imageBuffer.height = sourceHeight;
-          context.drawImage(imageSource, 0, 0, sourceWidth, sourceHeight);
+          imageBuffer.width = imageSource.videoWidth;
+          imageBuffer.height = imageSource.videoHeight;
+          context.drawImage(imageSource, 0, 0);
         },
         [imageBuffer],
       ),

diff --git a/packages/feedback/src/screenshot/components/useTakeScreenshot.tsx b/packages/feedback/src/screenshot/components/useTakeScreenshot.tsx
@@ -16,8 +16,8 @@ export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScr
       onBeforeScreenshot();
       const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
         video: {
-          width: WINDOW.innerWidth,
-          height: WINDOW.innerHeight,
+          width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
+          height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
         },
         audio: false,
         // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab