Skip to content

Commit e89af4c

Browse files
c298leecadesalaberry
authored andcommitted
fix(feedback): Fix screenshot black bars in Safari (getsentry#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
1 parent 3f77083 commit e89af4c

File tree

2 files changed

+5
-7
lines changed

2 files changed

+5
-7
lines changed

packages/feedback/src/screenshot/components/ScreenshotEditor.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -217,11 +217,9 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
217217
if (!context) {
218218
throw new Error('Could not get canvas context');
219219
}
220-
const sourceWidth = imageSource.videoWidth;
221-
const sourceHeight = imageSource.videoHeight;
222-
imageBuffer.width = sourceWidth;
223-
imageBuffer.height = sourceHeight;
224-
context.drawImage(imageSource, 0, 0, sourceWidth, sourceHeight);
220+
imageBuffer.width = imageSource.videoWidth;
221+
imageBuffer.height = imageSource.videoHeight;
222+
context.drawImage(imageSource, 0, 0);
225223
},
226224
[imageBuffer],
227225
),

packages/feedback/src/screenshot/components/useTakeScreenshot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScr
1616
onBeforeScreenshot();
1717
const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
1818
video: {
19-
width: WINDOW.innerWidth,
20-
height: WINDOW.innerHeight,
19+
width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
20+
height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
2121
},
2222
audio: false,
2323
// @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab

0 commit comments

Comments
 (0)