[mattgperry]

Additionally to the sibling comment, we do expose a secret API that can be used to fix distortion on other properties.

To take border from your example, in the Framer app we add correction that fixes border. But border is tricky because it only renders rounded values and triggers layout - exactly what we're trying to avoid. I always recommend a two element approach, one with an inset. More performant and visually nicer.

We also use this API to do more advanced stuff like this <LayoutCamera /> component for React Three Fiber/Framer Motion 3D. https://www.framer.com/docs/layoutcamera/

This camera renders the scene pre-distorted so when the layout transform is applied, everything looks correct.

[meindnoch]

>This camera renders the scene pre-distorted so when the layout transform is applied, everything looks correct.

Close, but still not perfect. Lines look blurry during the size animation, because the WebGL surface is rendered at the new resolution and then stretched to the current size. So if you animate from a 600x600 viewport to a 60x60 viewport it’s gonna look very bad when the animation starts. You should always render at max(old, new) resolution during the animation.

And again, this only works as long as the WebGL content commutes with affine transforms. If the WebGL content would contain 1 pixel screen-space hairlines, those would look bad when the framebuffer is stretched.

[mattgperry]

I'd say it's a pretty good comprise between quality and performance. Certainly better than the alternative.