Inconsistent rendering positioning & dimensions in Layers API

[vandalayindustries (Art Vandalay)]

Layers API seems to render incorrect position and dimensions on Mac zoom clients.

Details:
Example zoomConfig response:

drawParticipant is called given the following positions:

height: 552.84375
participantUUID: "10ADB150-7DDA-064D-924A-9651B65E6566"
width: 781.21875
x: 43.390625
y: 282.46875
zIndex: 2

This should position the participant in the middle of the following box, but as you can see the X, Y positions AND the width, height positions are off by exactly a factor of 2:

The correctly expected behavior occurs on some windows clients. Example (running the EXACT same code as above)

[vandalayindustries (Art Vandalay)]

To further clarify after more testing:

• Rendering positions work as would be expected on Windows 10
• On Windows 11 and Mac devices all dimensions require a factor of 2 to render correctly
• There doesn’t seem to be any way to detect whether this factor of 2 is needed on a particular device, resulting in a very poor user experience

[vandalayindustries (Art Vandalay)]

@MaxM , @Robert.Wallis , or anyone from Zoom team: this seems like a pretty fundamental issue with the layers API unless I’m missing something. Rendering on Windows clients seems to be inconsistent between Mac and PC clients making a nonfunctional experience for many users. Can you comment?

[Robert.Wallis]

Does window.devicePixelRatio give you the factor of 2 you’re looking for? Window: devicePixelRatio property - Web APIs | MDN

[vandalayindustries (Art Vandalay)]

@Robert.Wallis : genius. Yes it does.

[MaxM]

You can also check this sample app for examples of working with the Layers API as it pertains to multiple device sizes:

zoom/zoomapps-customlayout-js/blob/28aff71df50c5e55a2a72c5030a206d5276a8b18/public/js/lib/canvas.js#L294C1-L309C7