# [csswg-drafts] Pull Request: [css-transforms-1] Correct translation calculation in recomposition of decomposed transform

• From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
• Date: Thu, 31 Oct 2019 21:46:47 +0000
• Message-ID: <pull_request.labeled-331814378-None-sysbot+gh@w3.org>
```tabatkins has just labeled a pull request from jlfwong for https://github.com/w3c/csswg-drafts as "css-transforms-1":

== [css-transforms-1] Correct translation calculation in recomposition of decomposed transform ==
As far as I can tell, this calculation for recomposing the transform is incorrect.

If you apply the given pseudocode description of decomposing and recomposing to the following matrix:

```
[ 1 1 10
0 1 20 ]
```

(where `(t_x, t_y) = (10, 20)`)

Then you'd expect to get back the same matrix (decompose & recompose should be inverse functions).

However, if you follow the specification as given, then I think you get back the following instead:

```
[ 1 1 14.14
0 1 24.14 ]
```

More generally, you can see that the spec is wrong from inspection.

The decomposition logic does the following:

```
translate[0] = matrix[3][0]
translate[1] = matrix[3][1]
```

And nothing changes these `translate` values after-the-fact.

The recomposition logic (before this PR) then does:

```
matrix[3][0] = translate[0] * m11 + translate[1] * m21
matrix[3][1] = translate[0] * m12 + translate[1] * m22
```

Where `mNN` are as specified in the decomposition logic.

Which, by substitution, could alternatively be stated as:

```
matrix[3][0] = matrix[3][0] * m11 + matrix[3][1] * m21
matrix[3][1] = matrix[3][0] * m12 + matrix[3][1] * m22
```

Which I'm reasonably confident is incorrect.

As far as I can tell, browsers' implementations are more or less correct, but I suspect are correct by not following this specification.

See: https://codepen.io/jlfwong/pen/ZEEedwN. If they used the specified interpolation logic, there would be a sudden change in translation at some point during the transition. Note that the above codepen seems to behave the same in Chrome & Firefox, but differently in Safari.

See https://github.com/w3c/csswg-drafts/pull/4446
```

Received on Thursday, 31 October 2019 21:46:48 UTC