Zooming out breaks the site layout. (90% is enough)
Tested on Nightly, Dev Edition, Stable and ESR on both Windows and Linux.

Here are two different pages where it happens:
https://lolalytics.com/lol/tierlist/?view=grid
https://lolalytics.com/lol/annie/

see more details on https://webcompat.com/issues/47817

The site seems to break on Firefox on windows, linux but not on macos (retina screen)

The problem seems to be calculation of border width under zoom-out in gecko.

Firefox: Colored divs are positioned vertically when zoomed out.
Chrome : Colored divs are always positioned horizontally even if zoomed out.

Some rounding issue I assume. We have a lot of bugs open on similar issues, going back all the way to bug 417278.

It works fine for me if I use transform: scale(N%) though.

I think @emilio experimented with implementing zoom as a CSS transform... not sure how that panned out.

Anyway, we should keep one bug open on this issue, so duping this to bug 417278. Let's continue the discussion there.

The problem does not happen if use fake border instead of css border.

So I think the problem is just handling of css border width.

In the DevTool, the border width indicates 1px/(zoom level) in border1.html. It should be 1px.

Firefox:
zoom level  DevTool
       80%   1.25
       90%   1.11667
      100%   1
      110%   0.916667
      120%   0.833333

Chrome:
zoom level  DevTool
       80%   0.996
       90%   0.990
      100%   1
      110%   0.994
      125%   1

So, I think the problem is just handling of css border width, not a rounding bug.

That is bug 477157.