[BUG] transform-origin miscalculation in Firefox

[gajus]

1. Read the FAQs 👇

Done

2. Describe the bug

framer miscalculates transform-origin and there is no way to override it.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/example-2-simple-translation-forked-kgdj9?file=/src/index.js

4. Steps to reproduce

Inspect rect element styles.

5. Expected behavior

Expected (Chrome):

element {
    transform: scale(1) rotate(360deg);
    transform-origin: 0.5px 0.5px;
}

Unexpected (Firefox)

element {
    transform: scale(1) rotate(360deg);
    transform-origin: 0px 0px 0px;
}

[KirdesMF]

you can override it with originX originY in the style prop

[gajus]

Can you please update sandbox example to show how? Because I was not able to.

[KirdesMF]

https://codesandbox.io/s/example-2-simple-translation-forked-18sm3?file=/src/index.js

[gajus]

That is odd. Thank you. I am sure I've tried it, but must have messed up something. I might accidentally tried setting {x, y} instead, now that I think about it more.

The underlying issue still exists, but this workaround works.

[mattgperry]

For my later reference: Firefox probably hasn't measured element properly (it has issues doing this on mount)

[mattgperry]

This seems to be fixed in Firefox in the meantime

[pheki]

Also for future reference:

I can reproduce this same issue on a specific setup on Firefox 128 and Chromium 127 (recent versions), framer-motion 4.1.17 (released on 2021-05-17). If I remove and re-add the component, it works correctly.

I don't have a minimal reproducible example though and I haven't tested more recent versions of framer-motion.