Repository: three.js
Issue: CSS3DRenderer: Transforms broken depending on container size and position
Labels: Browser Issue

### Description

**Background:** The purpose of THREE.CSS3DRenderer is to apply CSS transforms to HTML elements, such that they appear to be within the 3D scene. They're still HTML elements of course, are not drawn to the depth buffer, and cannot participate in occlusion and lighting like THREE.Mesh objects.

**Problem:** The CSS 3D transforms required for correct element placement are very fragile to specific conditions of the DOM element given to CSS3DRenderer. The specific conditions are, very unfortunately, different in every major browser:

- **Chrome:** 
  - **Display:** When domElement (or its ancestor) uses `display: absolute`, then `.offsetTop` and `.offsetLeft` MUST be _whole numbers_. If they contain a fractional part, rendering will be displaced vertically or horizontally. When domElement uses `display: sticky`, everything is fine.
  - **Interactivity:** When a display bug is active, the interactive hitbox will be displaced, matching neither the expected nor the displayed location of the element.
  - **Bugs:** 
    - https://bugs.chromium.org/p/chromium/issues/detail?id=1494366
    - https://bugs.chromium.org/p/chromium/issues/detail?id=1338242
- **Safari:** 
  - **Display:** HTML placement varies dramatically with the width and height of `domElement`. I haven't figured out logic of it, but using _even numbers_ for both width and height appears to avoid the problem.
  - **Interactivity:** The interactive hitbox appears to stay in the expected location, even when the element is incorrectly displayed elsewhere.
  - **Bugs:**
    - https://bugs.webkit.org/show_bug.cgi?id=263454
- **Firefox:**
  - **Display:** Display is stable regardless of domElement offset, width, and height. However, using `display: sticky` on any ancestor of domElement will cause the CSS transforms to break badly during scrolling.
  - **Interactivity:** Interactive hitbox is correct and stable.

Presumably these are some browser bugs involved, but this was complex enough to track down in detail that I think we may want this issue documenting the situation. This bug also affects implementations derived from CSS3DRenderer, including [drei's `<HTML />` component](https://github.com/pmndrs/drei/#html) and [threlte's `<HTML />` component](https://threlte.xyz/docs/reference/extras/html).

This is likely related to the root cause for a number of other issues, including:

- https://github.com/mrdoob/three.js/issues/26583
- https://github.com/pmndrs/drei/issues/428
- https://github.com/pmndrs/drei/issues/720
- https://github.com/threlte/threlte/issues/355


### Reproduction steps

1. Open live example (https://jsfiddle.net/donmccurdy/twy3p2zv/)
2. To see display issues, adjust offsets, width, or height
3. To see interactivity issues, hover mouse over `:)` to change its background color


### Code

See live example.

### Live example

https://jsfiddle.net/donmccurdy/twy3p2zv/

### Screenshots

| expected | actual |
|---|---|
| ![expected](https://github.com/mrdoob/three.js/assets/1848368/c66f17c5-264e-4bfa-a09b-755a0739c253) | ![broken](https://github.com/mrdoob/three.js/assets/1848368/a10b3278-a6f6-4e54-b0e6-ad5953385175) |


### Version

r157

### Device

Desktop

### Browser

Chrome, Firefox, Safari

### OS

MacOS