Commit a38bebe
authored
fix: CSS perspective interpolation NaN from the infinity default (#9712)
## Summary
Animating a `transform` whose `perspective` falls back to the default
(no perspective, represented internally as `infinity`) evaluated `inf +
t * (d - inf) = NaN`, which poisoned the transform matrix and made the
view disappear.
Perspective is now interpolated in reciprocal space (`1/inf = 0`),
matching how it enters the matrix (`-1/d`) and the spec's matrix
interpolation. Finite-to-finite perspective is unchanged. The old `value
== 0` guards were dead code - `sanitizePerspectiveValue` forces `|value|
>= 1`, so perspective can never be `0` - so they are removed.
## Before / After
Verified on the Android emulator across several CSS animations that
interpolate `perspective` from/to the default (no-perspective) endpoint
- the case this fixes:
- `[]` -> `[{ perspective: 100 }, { rotateY: '50deg' }]`
- `[]` -> `[{ perspective: 100 }, { rotateX: '50deg' }]`
- `[{ perspective: 100 }, { rotateY: '50deg' }]` -> `[]`
https://github.com/user-attachments/assets/1d7ca900-72fd-48e9-a7fc-ef141e22c14c1 parent a9c93a4 commit a38bebe
1 file changed
Lines changed: 12 additions & 5 deletions
File tree
- packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/transforms
Lines changed: 12 additions & 5 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
5 | 5 | | |
6 | 6 | | |
7 | 7 | | |
| 8 | + | |
| 9 | + | |
8 | 10 | | |
9 | 11 | | |
10 | 12 | | |
| |||
31 | 33 | | |
32 | 34 | | |
33 | 35 | | |
34 | | - | |
35 | 36 | | |
36 | 37 | | |
37 | 38 | | |
38 | | - | |
39 | | - | |
40 | | - | |
41 | | - | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
42 | 49 | | |
43 | 50 | | |
44 | 51 | | |
| |||
0 commit comments