fix(react-ecs): stop dividing UI layout by devicePixelRatio

`uiScaleFactor` is now exactly the contain-fit of the design resolution
inside the canvas, and `scaleOnDim` resolves 'Nvw'/'Nvh' and string
`fontSize` to N% of the canvas dimension, as in CSS.

devicePixelRatio is a density hint for picking a 1x/2x/3x asset, and each
renderer computes it differently, so dividing by it made UI size inversely
proportional to whichever value the scene happened to get. The field stays
on PBUiCanvasInformation and `ScaleContext.ratio` stays in the public API.
No renderer change is required.

BREAKING CHANGE: scenes that set a virtual size and were calibrated against
the current behaviour will render devicePixelRatio times larger. Scenes that
pass no virtual size keep uiScaleFactor === 1 and are unaffected.

Author: leanmendoza

packages/@dcl/react-ecs/src/components/utils.ts

@@ -53,8 +53,8 @@ export function getScaleAndUnit(scaleUnit: ScaleUnit): [number, ScaleUnits] {
 /**
  * @internal
  */
-export function scaleOnDim(scale: number, dim: number, pxRatio: number) {
-  return (dim / 100) * (scale / pxRatio)
+export function scaleOnDim(scale: number, dim: number) {
+  return (dim / 100) * scale
 }
 
 /**
@@ -192,10 +192,13 @@ export function calcOnViewport(value: ScaleUnit, ctx: ScaleContext | undefined =
   const [scale, unit] = getScaleAndUnit(value)
   if (!ctx) return scale
 
-  const { height, width, ratio } = ctx
+  // `ctx.ratio` is intentionally not read: '1vw' is 1% of the canvas width by
+  // definition, exactly as in CSS. It stays on ScaleContext as an informational
+  // density hint for callers that need to pick an asset resolution.
+  const { height, width } = ctx
 
-  if (unit === 'vh') return scaleOnDim(scale, height, ratio)
+  if (unit === 'vh') return scaleOnDim(scale, height)
 
   // by default, we scale by 'vw' (width)
-  return scaleOnDim(scale, width, ratio)
+  return scaleOnDim(scale, width)
 }

packages/@dcl/react-ecs/src/system.ts

@@ -142,14 +142,20 @@ export function createReactBasedUiSystem(engine: IEngine, pointerSystem: Pointer
 
     if (!canvasInfo) return
 
-    const { width, height, devicePixelRatio } = canvasInfo
+    const { width, height } = canvasInfo
     const { virtualWidth, virtualHeight } = activeVirtualSize
     if (!virtualWidth || !virtualHeight) return
 
-    // Normalize by devicePixelRatio so virtual px map to logical px (matching the
-    // vw/vh path); without it the scale was inflated on high-dpr mobile screens.
-    const ratio = devicePixelRatio || 1
-    const nextScale = Math.min(width / virtualWidth, height / virtualHeight) / ratio
+    // The scale factor is the contain-fit of the design resolution inside the canvas,
+    // and nothing else.
+    //
+    // devicePixelRatio is deliberately absent. It is a density hint — "how many physical
+    // pixels per canvas unit", for picking a 1x/2x/3x asset — not a layout unit, the same
+    // role it has in CSS and React Native, where it is exposed but never enters layout.
+    // Dividing by it made UI size inversely proportional to a quantity the scene author
+    // does not control and that measures something different on every renderer: panel
+    // density on mobile, OS display scaling on web, display/window on native desktop.
+    const nextScale = Math.min(width / virtualWidth, height / virtualHeight)
     if (Number.isFinite(nextScale) && nextScale !== getUiScaleFactor()) {
       // Track ownership when updating to avoid cross-system conflicts.
       setUiScaleFactor(nextScale, uiScaleFactorOwner)

test/react-ecs/label.spec.tsx

@@ -113,23 +113,34 @@ describe('UiText React Ecs', () => {
     })
 
     it('should scale font size using viewport width by default', () => {
-      expect(scaleFontSize(16, undefined, scaleCtx)).toBeCloseTo(17.56)
+      // 16 + 0.39% of 800
+      expect(scaleFontSize(16, undefined, scaleCtx)).toBeCloseTo(19.12)
     })
 
     it('should scale font size using viewport height when scale unit is "vh"', () => {
-      expect(scaleFontSize(16, '10vh', scaleCtx)).toBeCloseTo(46)
+      // 16 + 10% of 600
+      expect(scaleFontSize(16, '10vh', scaleCtx)).toBeCloseTo(76)
     })
 
     it('should scale font size correctly when scale unit is "vw"', () => {
-      expect(scaleFontSize(16, '10vw', scaleCtx)).toBeCloseTo(56)
+      // 16 + 10% of 800
+      expect(scaleFontSize(16, '10vw', scaleCtx)).toBeCloseTo(96)
     })
 
     it('should handle scaling with a numeric value', () => {
-      expect(scaleFontSize(16, 10, scaleCtx)).toBeCloseTo(56)
+      expect(scaleFontSize(16, 10, scaleCtx)).toBeCloseTo(96)
     })
 
     it('should handle scaling with a numeric value and unit "vw"', () => {
-      expect(scaleFontSize(16, '10.5vw', scaleCtx)).toBeCloseTo(58)
+      expect(scaleFontSize(16, '10.5vw', scaleCtx)).toBeCloseTo(100)
+    })
+
+    it('should not depend on the context ratio', () => {
+      // 'Nvw' is N% of the canvas width by definition, exactly as in CSS. The density
+      // hint on the context must not change what a viewport unit resolves to.
+      for (const ratio of [0.5, 1, 2, 3]) {
+        expect(scaleFontSize(16, '10vw', { ...scaleCtx, ratio })).toBeCloseTo(96)
+      }
     })
   })
 

test/react-ecs/virtual-scale-array.spec.tsx

@@ -311,11 +311,12 @@ describe('Virtual scale factor with mixed % and pixel values', () => {
     uiRenderer.destroy()
   })
 
-  it('should normalize the scale factor by devicePixelRatio', async () => {
+  it('should not let devicePixelRatio affect the scale factor', async () => {
     const { engine, uiRenderer } = setupEngine()
     const UiTransform = components.UiTransform(engine)
     const UiCanvasInformation = components.UiCanvasInformation(engine)
-    // Physical-pixel canvas on a high-DPR (mobile) screen: 3840x2160 @ dpr 2.
+    // High-density screen: 3840x2160 @ dpr 2. The design resolution fits the canvas
+    // exactly twice over, so that — and only that — is the scale factor.
     UiCanvasInformation.create(engine.RootEntity, {
       devicePixelRatio: 2,
       width: 3840,
@@ -328,41 +329,45 @@ describe('Virtual scale factor with mixed % and pixel values', () => {
 
     await engine.update(1)
 
-    // scale = Math.min(3840/1920, 2160/1080) / 2 = 2 / 2 = 1
-    expect(getUiScaleFactor()).toBe(1)
-
-    const panelEntity = (entityIndex + 1) as Entity
-    expect(UiTransform.get(panelEntity).width).toBe(300) // 300 * 1
-    expect(UiTransform.get(panelEntity).height).toBe(300) // 300 * 1
-
-    uiRenderer.destroy()
-  })
-
-  it('should treat a missing/zero devicePixelRatio as 1', async () => {
-    const { engine, uiRenderer } = setupEngine()
-    const UiTransform = components.UiTransform(engine)
-    const UiCanvasInformation = components.UiCanvasInformation(engine)
-    UiCanvasInformation.create(engine.RootEntity, {
-      devicePixelRatio: 0,
-      width: 3840,
-      height: 2160,
-      interactableArea: { left: 0, right: 0, top: 0, bottom: 0 }
-    })
-    const entityIndex = engine.addEntity() as number
-
-    uiRenderer.setUiRenderer(() => <Panel1 />, { virtualWidth: 1920, virtualHeight: 1080 })
-
-    await engine.update(1)
-
-    // dpr 0 must not divide by zero — falls back to 1, so scale = 2
+    // scale = Math.min(3840/1920, 2160/1080) = 2, undivided.
     expect(getUiScaleFactor()).toBe(2)
 
     const panelEntity = (entityIndex + 1) as Entity
     expect(UiTransform.get(panelEntity).width).toBe(600) // 300 * 2
+    expect(UiTransform.get(panelEntity).height).toBe(600) // 300 * 2
 
     uiRenderer.destroy()
   })
 
+  it('should produce the same scale factor whatever devicePixelRatio reports', async () => {
+    // The regression guard: two canvases identical in every way except the density
+    // hint must lay out identically. dpr 0 is included because it used to be a
+    // divide-by-zero guard, and there must no longer be a division to guard.
+    for (const devicePixelRatio of [0, 1, 2, 3.5]) {
+      const { engine, uiRenderer } = setupEngine()
+      const UiTransform = components.UiTransform(engine)
+      const UiCanvasInformation = components.UiCanvasInformation(engine)
+      UiCanvasInformation.create(engine.RootEntity, {
+        devicePixelRatio,
+        width: 3840,
+        height: 2160,
+        interactableArea: { left: 0, right: 0, top: 0, bottom: 0 }
+      })
+      const entityIndex = engine.addEntity() as number
+
+      uiRenderer.setUiRenderer(() => <Panel1 />, { virtualWidth: 1920, virtualHeight: 1080 })
+
+      await engine.update(1)
+
+      expect(getUiScaleFactor()).toBe(2)
+
+      const panelEntity = (entityIndex + 1) as Entity
+      expect(UiTransform.get(panelEntity).width).toBe(600) // 300 * 2
+
+      uiRenderer.destroy()
+    }
+  })
+
   it('should use scale factor 1 when UiCanvasInformation is not yet available', async () => {
     const { engine, uiRenderer } = setupEngine()
     const UiTransform = components.UiTransform(engine)