Issue of using Cesium with CSS transform

CesiumJS
1

When using css transform to scale the Cesium container, the entity inside could not get picked.
Here is the codesandbox that illustrate the issue:

https://codesandbox.io/s/keen-tharp-pdkv3?file=/src/index.js

The Cesium container css in style.css as below:

#app {
width: 400px;
height: 400px;
/* below lines cause entity cannot be clicked */
transform-origin: left top;
transform: scale(0.9, 0.9);
}

When remove the transform lines, the red dot on map can be clicked and shows the alert.
When add the two lines, the red dot not respond to click event.

Is this a bug, or what should I do to make it work with css transform?

2

I think this transform visually changes the dimensions of the canvas, but the canvas is still considered at its original size. But the mouse coordinates when you click don’t scale in the same way. So one way to fix this is by applying this scaling to the mouse coordinates like this:

var newPosition = new Cesium.Cartesian2(movement.position.x / 0.8, movement.position.y / 0.8);
const pick = viewer.scene.pick(newPosition);