CSS3D object position is wrong when the browser zoom is not 100% and not full screen under the window system

[muuyao]

Description

CSS3D object position is wrong when the browser zoom is not 100% and not full screen under the window system

Reproduction steps

1. open the demo
2. check the location

Code

    const geometry = new THREE.BoxGeometry(1, 10, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0x999999 });
    const cube = new THREE.Mesh(geometry, material);
    cube.scale.set(0.5, 0.5, 0.5);

    const x = 0;
    const y = 0;
    const z = 0;
    cube.position.set(x, y, z);
    const el = document.querySelector(`.board-info`);
    if (el) {
      const boardInfo = new CSS3DObject(el as HTMLElement);
      boardInfo.position.set(x, y, z);
      boardInfo.scale.set(0.05, 0.05, 0.05);
      boardInfo.rotateY(Math.PI / 2);
      scene.add(boardInfo);
      scene.add(cube);
    }

Live example

• codesandbox
• demo

Screenshots

No response

Version

0.149.0

Device

Desktop

Browser

Chrome

OS

Windows

[Mugen87]

Duplicate of #3225.

To clarify, this issue is not Windows related, it happens everywhere. This is how your demo looks like on macOS with 25% zoom level.

The CSS renderers only support 100% browser zoom.

[muuyao]

Duplicate of #3225.

To clarify, this issue is not Windows related, it happens everywhere. This is how your demo looks like on macOS with 25% zoom level.

The CSS renderers only support 100% browser zoom.

Sorry, I missed the point

On the window system, when the screen is zoomed, even if the browser does not zoom, the position is wrong

[Mugen87]

when the screen is zoomed

So you mean zooming with the mouse wheel, right?

[muuyao]

when the screen is zoomed

So you mean zooming with the mouse wheel, right?

I mean this, for example, I set it to 125%

[Mugen87]

Interesting. AFAICS, the display scale settings also affects websites and thus CSS renderers. It's essentially the same problem/root cause like with browser scale.

[Mugen87]

I have filed a PR to document the limitation of CSS renderers. Closing, since this is still a duplicate.