fix: prevent NaN in transform calculations when scale is 0 (#1971)

* fix: prevent NaN in transform calculations when scale is 0

- Add MIN_SCALE constant to avoid zero scaling
- Update scale transform functions to enforce minimum scale value
- Add test case for scale(0) transform
- Add demo example with scale(0) transform

* chore: add changeset

* refactor: extract scale clamping logic into reusable function

- Add clampScale helper function to avoid code duplication
- Replace repeated Math.max(item, MIN_SCALE) calls with clampScale
- Maintain same behavior while improving code maintainability

Author: wang1212

.changeset/all-dots-check.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': patch
+---
+
+fix: prevent NaN in transform calculations when scale is 0

__tests__/demos/2d/transform.ts

@@ -4,6 +4,17 @@ export async function transform(context) {
   const { canvas } = context;
   await canvas.ready;
 
+  const circle0 = new Circle({
+    style: {
+      cx: 50,
+      cy: 50,
+      r: 20,
+      fill: 'blue',
+      transform: 'scale(0)',
+    },
+  });
+  canvas.appendChild(circle0);
+
   const circle1 = new Circle({
     style: {
       cx: 100,

__tests__/unit/css/properties/transform.spec.ts

@@ -233,6 +233,31 @@ describe('CSSPropertyTransform', () => {
     expect(circle.getLocalBounds().halfExtents).toStrictEqual([25, 25, 0]);
   });
 
+  it('should handle scale(0) transform correctly without returning NaN in bounds', async () => {
+    const circle = new Circle({
+      style: {
+        cx: 10,
+        cy: 10,
+        r: 50,
+        transform: 'scale(0)',
+      },
+    });
+
+    await canvas.ready;
+    canvas.appendChild(circle);
+
+    const bounds = circle.getBounds();
+    expect(bounds).toBeDefined();
+
+    expect(bounds.center.every(Number.isFinite)).toBeTruthy();
+    expect(bounds.halfExtents.every(Number.isFinite)).toBeTruthy();
+    expect(bounds.min.every(Number.isFinite)).toBeTruthy();
+    expect(bounds.max.every(Number.isFinite)).toBeTruthy();
+
+    expect(bounds.center).toStrictEqual([10, 10, 0]);
+    // expect(bounds.halfExtents).toStrictEqual([0, 0, 0]);
+  });
+
   it("should reset transform with 'none' keyword correctly.", async () => {
     const circle = new Circle({
       style: {

packages/g-lite/src/utils/transform-mat4.ts

@@ -6,6 +6,16 @@ import { runtime } from '../global-runtime';
 import type { TransformType } from '../types';
 import { deg2rad } from './math';
 
+/**
+ * Minimum scaling limit
+ *
+ * When `scale` is 0, the matrix will become an irreversible matrix,
+ * and `NaN` will appear during matrix calculation and decomposition,
+ * causing exceptions
+ */
+const MIN_SCALE = 0.000001;
+const clampScale = (item: number) => Math.max(item, MIN_SCALE);
+
 function createSkewMatrix(skewMatrix: mat4, skewX: number, skewY: number) {
   // Create an identity matrix
   mat4.identity(skewMatrix);
@@ -21,19 +31,36 @@ const $mat4_2 = mat4.create();
 
 const parser: Record<TransformType, (d: CSSUnitValue[]) => void> = {
   scale: (d: CSSUnitValue[]) => {
-    mat4.fromScaling($mat4_1, [d[0].value, d[1].value, 1]);
+    mat4.fromScaling(
+      $mat4_1,
+      [d[0].value, d[1].value, 1].map((item) => clampScale(item)) as vec3,
+    );
   },
   scaleX: (d: CSSUnitValue[]) => {
-    mat4.fromScaling($mat4_1, [d[0].value, 1, 1]);
+    mat4.fromScaling(
+      $mat4_1,
+      [d[0].value, 1, 1].map((item) => clampScale(item)) as vec3,
+    );
   },
   scaleY: (d: CSSUnitValue[]) => {
-    mat4.fromScaling($mat4_1, [1, d[0].value, 1]);
+    mat4.fromScaling(
+      $mat4_1,
+      [1, d[0].value, 1].map((item) => clampScale(item)) as vec3,
+    );
   },
   scaleZ: (d: CSSUnitValue[]) => {
-    mat4.fromScaling($mat4_1, [1, 1, d[0].value]);
+    mat4.fromScaling(
+      $mat4_1,
+      [1, 1, d[0].value].map((item) => clampScale(item)) as vec3,
+    );
   },
   scale3d: (d: CSSUnitValue[]) => {
-    mat4.fromScaling($mat4_1, [d[0].value, d[1].value, d[2].value]);
+    mat4.fromScaling(
+      $mat4_1,
+      [d[0].value, d[1].value, d[2].value].map((item) =>
+        clampScale(item),
+      ) as vec3,
+    );
   },
   translate: (d: CSSUnitValue[]) => {
     mat4.fromTranslation($mat4_1, [d[0].value, d[1].value, 0]);