Is there a standard solution for interaction issues caused by transform, or is it an unexpected bug?

CesiumJS
1

When the outer DOM container has transform: scale(n) and n is not equal to 1, it causes interaction offsets — the actual trigger point ends up at the position computed after the transform, including mouse controls over the camera and other mouse events.

Attempt 1:
Approach: Pre-calculate the scaling situation and set the canvas size according to the scaled values.
Result: Camera controls and interaction events match correctly, but it causes other elements in the scene to be synchronously scaled up/down.

Attempt 2:
Approach: Directly modify the source code in ScreenSpaceEventHandler.js, adding scale calculation to the getPosition method:

const rect = element.getBoundingClientRect();
const scaleX = rect.width / element.clientWidth;
const scaleY = rect.height / element.clientHeight;

result.x = (event.clientX - rect.left) / scaleX;
result.y = (event.clientY - rect.top) / scaleY;

Result: Camera controls and interaction events both produce the correct results.

2

Hey @xinyi, thanks for the detailed write-up. Your analysis of ScreenSpaceEventHandler looks reasonable, but I’d like to see a minimal Sandcastle that reproduces the issue so we can confirm the behavior without any interference from other parts of your setup.

Could you put together a Sandcastle (using the HTML panel to wrap the cesiumContainer in a scaled parent div) that demonstrates the offset? That would make it much easier to validate your fix and would also serve as a solid reproduction case if you open a GitHub issue on the CesiumJS repo.

Cheers!

3

Sure, here’s the Sandcastle Demo. Clicking directly on the billboard does not trigger the interaction, but clicking at the inversely scaled position does.

PixPin_2026-05-07_11-34-40

4

Hey @xinyi, thanks for putting together that Sandcastle, it really makes the issue clear!

I believe your analysis of ScreenSpaceEventHandler is correct. The fix using getBoundingClientRect() combined with the scale ratio looks promising too. I’ve opened a GitHub issue for this: ScreenSpaceEventHandler: CSS transform on canvas parent causes mouse interaction offset · Issue #13493 · CesiumGS/cesium · GitHub

If you’re interested, this would make a great PR contribution! The contributor’s guide is here: cesium/CONTRIBUTING.md at main · CesiumGS/cesium · GitHub
For future finds like this, feel free to open a GitHub issue directly too, it helps the team track and prioritize fixes.

Cheers!