Get `transform: scale(...)` to position elements the same as `zoom: ...`

Get `transform: scale(...)` to position elements the same as `zoom: ...`

The best way to explain is probably with a picture.
Here is how my elements are positioned when applying:
.shape {
transform: scale(0.5);
transform-origin: 0 0;
}

And here is how they are positioned when applying:
.shape {
zoom: 0.5;
}

Notice that scale lays the components out as if they were their original
size where as zoom lays them out based on their scaled down size.
Unfortunately zoom is not supported in Firefox (AFAIK) so I need to get
the layout behavior of zoom when applying transform: scale...
Any ideas? I'd like to avoid absolute positioning as much as possible.