Zooming out on Canvas Element(s) causes Cropping in Replays

[ReneGreen27]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

This is being seen in a React project on latest SDK version (8.48.0)

This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.

You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.

The element in question is a canvas and are confirmed to be snapshotting per the documentation.

Expected Result

For the replay to correct capture the zooming out of the canvas element(s).

Actual Result

Example replays and user view recordings can be found in internal ticket #142417

Product Area

Replays

Link

No response

DSN

No response

Version

No response

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[getsantry]

Routing to @getsentry/product-owners-replays for triage ⏲️

[billyvg]

can you take a look at this @c298lee?

[c298lee]

The zooming in the example replay and the user view recordings match up. The issue does not seem to be with the zooming but with the canvas taking up less room than it should. In the recording, the canvas takes up the full screen, but in the replay, the canvas takes up ~66% of the screen. This is because the source image is 2534 x 1172 while the canvas is 3801 x 1758. I need to further investigate to see why the image dimensions don't match the canvas dimensions

[c298lee]

@ReneGreen27 Could you ask the customer to provide a link to their project that I could debug with?

[ReneGreen27]

@c298lee there is an example link provided in the internal ticket 142417 as shared above, I will also PM this to you :)

[optical]

Hi @c298lee, just a heads up that I'm the customer who lodged this ticket via support. If you need anything or have any questions, let me know.

[c298lee]

I'm currently looking into this!