The transform style of the <Html/> be overwritten in some cases

[enpitsuLin]

• three version: ^0.179.1
• @react-three/fiber version: ^9.3.0
• @react-three/drei version: ^10.6.1
• node version: 22.14.0
• npm (or yarn) version: pnpm@10.13.1

Problem description:

When using <Html/> components on Next.js and set distanceFactor, I found that in some cases scale was not set correctly.

Check reproduction

If this issue does not occur initially, it will occur after navigating between the / and /page multiple times.

expect

actual in sometime

Relevant code:

reproduce on Stackblitz: https://stackblitz.com/~/github.com/enpitsuLin/r3f-deri-issue

Suggested solution:

I think here is root cause

drei/src/web/Html.tsx

Line 219 in 4a7ff03

el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`

Assignment seems remove transform scale from

drei/src/web/Html.tsx

Line 353 in 4a7ff03

el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`

Maybe there are some race condition between useLayoutEffect (triggered by target changes) and useFrame execution. The execution sequence does not always proceed as expected.

[enpitsuLin]

z-index seems also be overwritten btw

workaround

patch-package with npm only

diff --git a/node_modules/@react-three/drei/web/Html.js b/node_modules/@react-three/drei/web/Html.js
index 81d68b7..cc0d02d 100644
--- a/node_modules/@react-three/drei/web/Html.js
+++ b/node_modules/@react-three/drei/web/Html.js
@@ -146,7 +146,8 @@ const Html = /* @__PURE__ */React.forwardRef(({
         el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
       } else {
         const vec = calculatePosition(group.current, camera, size);
-        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+        const scale = distanceFactor === undefined ? 1 : objectScale(group.current, camera) * distanceFactor;
+        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale});transform-origin:0 0;z-index:${objectZIndex(group.current, camera, zIndexRange)}`;
       }
       if (target) {
         if (prepend) target.prepend(el);else target.appendChild(el);

[DennisSmolek]

I did some slight differences. I apply only the base changes onLoad and leave useFrame as the control source so there is no race conditions.

Fixed in v11